代码之家 › 专栏 › 技术社区 › Srikar Appalaraju Tonetel

对齐标记

layout user-interface css html

Srikar Appalaraju Tonetel · 技术社区 · 15 年前

我有一份有序的清单 <input type="text"... 和 <button> 字段。当我渲染它们时,我得到两个独立的行中的字段。我怎样才能让他们排成一行?

HTML格式-

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

我甚至把它们从 <li> &分开放置(amp;P) <div> 没有成功。需要在这里添加什么CSS来克服这种默认行为?

更新: 我现在已从订购列表中删除这两个标记,并将它们放入 <分区> . 现在看起来是这样-

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

3 回复 | 直到 15 年前

ArK Sheeba Nancy 15 年前

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

Community Mohan Dere 9 年前

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

我想这一定在 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。