CODEWITHSUNDEEP
htmlcssalignmentsearchbar
John David
John David

Reputation: 3

Trying to align search form to the right of a <li>

I am trying to align my search bar to the right side of the li menu items.

HTML:

<body>
    <div id="navbox">
        <nav id="nav">
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">History</a></li>
                <li><a href="#">Leaders</a></li>
                <li><a href="#">Youth</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Contact</a></li>
                <li>
                    <form method="get" action="/search" id="search">
                        <input name="q" type="text" size="40" placeholder="Search..." />
                    </form>
                </li>
            </ul>
        </nav>
    </div>
</body>

CSS:

form {
padding-left: 15px;
margin: 0;
}

Is there any way possible to accomplish this?

Upvotes: 0

Views: 102

Answers (2)

Mad Angle
Mad Angle

Reputation: 2330

display:inline-block will work for you.

ul#nav li {
  display:inline-block
}

You can find Demo here.

Upvotes: 1

Devin
Devin

Reputation: 7720

yes sure, you can simply add this line to your CSS:

nav, ul, li {display:inline-block}

and it will work. But a comment: be sure not to use the same ID twice. And try to use classes whenever possible (which is almost always)

Just in case, see this fiddle so you can play around, try adding paddings, margins, whatever, adn see how it reacts

Upvotes: 1

Related Questions