对齐 <input> 和 <button> 标签

Question

我有一个有序列表，其中包含 <input type="text"... 和 <button> 字段。当我渲染它们时，我会在 2 个单独的行中获得这些字段。如何让他们排在同一行？

HTML-

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

我什至将它们从<li> 中删除，并将它们放在单独的<div> 中，但没有成功。需要在此处添加什么 CSS 来克服这种默认行为？

更新：我现在已经从有序列表中删除了这 2 个标签并将它们放在 <div> 中。现在看起来像这样 -

<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>

尝试float:left; 或display:inline-block 无效。

Answer 1

<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>

Answer 2

提交按钮在不同的浏览器中似乎有不同的默认边距和内边距值。

我认为这必须在some reset Stylesheet 中，因为这不是唯一令人讨厌的跨浏览器“默认”值差异。网络何时会标准化这是另一个主题。

这就是我们的做法：

#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>

我注意到 IE8、Firefox 和 GChrome 之间的差异非常小，但在其他浏览器中可能存在。

此处的表单将其位置设置为“相对”，因此当我将按钮的位置设置为绝对位置时，按钮自身的位置相对于 searchForm。

Answer 3

它应该在同一行。

请检查<li> and <li> 的父标签（<ul> 或其他东西）的宽度。 我认为这可能会导致这种情况。