CODEWITHSUNDEEP
htmlcssuser-interfacelayout
Srikar Appalaraju
Srikar Appalaraju

Reputation: 73688

Align <input> & <button> tags

I have an ordered list which has a <input type="text"... and <button> field. When I render them I get the fields in 2 separate lines. How do I get them to come in the same line?

HTML-

<li>
    <input type="text" value="Paste URL here"></input>
    <button id="i">Go</button>
</li>

I have even removed them from <li> & put them in a separate <div> with no success. What CSS needs to be added here to overcome this default behavior?

UPDATE: I have now removed these 2 tags from the ordered list & put them in a <div>. It looks like this now - 

<div style="display: inline-block">
    <input id="url" type="text" value="Paste URL here"></input>
    <button id="i" style="font-size:10px; margin:2px;">Go</button>
</div>

No effect on trying float:left; or display:inline-block.

Upvotes: 3

Views: 14659

Answers (3)

Adriano
Adriano

Reputation: 20041

Submit button seem to have different default margin and padding values in different browsers.

I assume this must be in some reset Stylesheet as this is not the only annoying cross browser "default" values discrepancy. When is the web going to standardize this is another subject.

This is how we do it:

#searchForm {
    position: relative;   // you must keep this
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 30px;
}
input#searchEntry {
    padding: 0;    // you must keep this
    margin: 0;     // you must keep this
    margin-top: 3px;
    width: 198px;
    font: 17px Arial,Helvetica,sans-serif;
}
input#searchBtn{
    padding: 0;   // you must keep this
    margin: 0;    // you must keep this
    position: absolute;   // you must keep this
    left: 203px;
    top: 2px;
    height: 24px;
    width: 42px;
    font-size: 14px;
    background: url(http://yourDomain/img/yourPrettySearchIcon.png) buttonface no-repeat 9px 1px;
    cursor:pointer;
    cursor:hand;
}


<form id="searchForm" name="mySearchForm" action="myPage.html" method="post">
    <input name="searchEntry" value="" id="searchEntry" type="text"/>
    <input name="searchBtn" value="" id="searchBtn" type="submit"/>
</form>

I noticed very small discrepancies between IE8, Firefox and GChrome but there may be in other browsers.

The form here has its position set to "relative" so that when I set the button's position to absolute, the button position itself relatively to the searchForm.

Upvotes: 1

ArK
ArK

Reputation: 21066

<div style="width: 100%;">
    <input type="text" style="float: left; width: 200px;" id="url" value="Paste URL here">
    <button style="font-size: 10px; margin: 2px; float: left;" id="i">Go</button>
</div>

Upvotes: 3

Mohamed Saligh
Mohamed Saligh

Reputation: 52

It should be in the same line.

Please check the width of <li> and <li>'s parent tag (<ul> or something). I think that can cause this.

Upvotes: 0

Related Questions