将按钮对齐以与浮动输入？

Question

如何在输入文本旁边对齐按钮。 Example here

HTML

<div id="frm">
<label>Select an Item:
    <input type="text" /><input type="button" value="..." class="open">
</label>

<label>Price:<input type="text" /></label>

CSS

#frm label
{ 
    display:block;
    float:left;
    padding-right:6px;
}

#frm input
{
    display:block;

}

修改 我希望我的表单元素在块和水平方向上水平对齐。我喜欢弹出按钮与一个文本框对齐。

Answer 1

我建议将<input>移到<label>之外，如下所示：

<div id="frm">
    <div class="group">
        <label for="item">Select an Item:</label>
        <input type="text" id="item" />
        <input type="button" value="..." class="open">
    </div>

    <div class="group">
        <label for="price">Price:</label>
        <input type="text" id="price" />
    </div>
</div>

如果要将输入与标签分开，则应将标签文本放在自己的元素中，而不是将标签文本和输入混合到公共标签中。

然后，您可以使用以下CSS：

#frm .group {
    display: block;
    float: left;
    padding-right: 6px;
}

#frm label {
    display:block;
}

See how it looks like，这就是你想要的吗？

Answer 2

http://jsfiddle.net/ckfZE/18/

虽然添加了span-tag

Answer 3

- 解决问题的最简单方法是删除所有CSS - 默认情况下input是内联的，因此如果不添加CSS，它将不会换行到下一行。

- 我会添加一个额外的div，以确保你的字段在单独的行上，也不需要CSS。

像这样：

<div id="frm">
    <div class="field">
        <label>Select an Item:</label>
        <input type="text"><input type="button" value="..." class="open">
    </div> 
    <div class="field">
        <label>Price:</label>
        <input type="text">
    </div>
</div>

http://jsfiddle.net/ckfZE/15/

Answer 4

这个CSS导致了这种冲突：

#frm input {
    display:block;
}

您可以将.open设置为display:inline来解决此问题。

Answer 5

对您的问题稍微具体一点。如果您完全取出CSS，它们将彼此相邻排列。如果您希望它们在单独的行中，请在输入文本后添加<br/>。