html - 对齐 &lt;input&gt; 和 <button> 标签

Question

我有一个有序列表，其中有一个 <input type="text"...和 <button> field 。当我渲染它们时，我在 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>