HTML对齐挑战

Question

如果我有一堆文本框和一个按钮，例如

<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<button>Right align me</button>

如何在不指定所有内容大小的情况下右键对齐文本框和按钮的右边缘？

更新 - 也许我的问题不明确。一些答案建议正确对齐一切。看起来像这样：

但我实际上希望文本框保持对齐，但是按钮右边对齐这些文本框的边缘。有没有办法做到这一点？

Answer 1

如果将它们全部包含在块元素（例如<div>）中，则可以在text-align: right;上指定<div>，它将使所有内容对齐，无论大小

Here's an example：

<div id="container">
    <input type="text" /><br/>
    <input type="text" /><br/>
    <input type="text" /><br/>
    <button>Right align me</button>
</div>

#container{
    text-align: right;
}

---

更新

根据您问题的更改，something like this会更好吗？ 它将按钮与最长输入的最右侧和底部对齐。唯一的缺点是，如果您在框下方有内容，则需要添加一些额外的边距，因此它不会与按钮重叠。

<div id="container">
    <input type="text" /><br/>
    <input type="text" /><br/>
    <input type="text" /><br/>
    <button>Right align me</button>
</div>

#container{
    display: inline-block;
    position: relative;

    /* Add 25px margin to prevent overlap with the button */
    margin-bottom: 25px;
}

button{
    position: absolute;
        top: 100%;
        left: 100%;

    /* Make it look more normal-sized */
    width: 120px;
    height: 25px;
}

Answer 2

将input和button元素的宽度设置为100％，并使用容器设置其实际宽度：

HTML：

<div id="container">
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <button>Right align me</button>
</div>

CSS：

#container { width: 200px; }
input { width: 100%; }
button { width: 100%; }

Answer 3

将其包装在div中并使用text-align：right和float：left或display：inline-block。第一个在ie6中工作。

像这样：

<div style=" text-align: right; float:left;">
     <input type="text" /><br/>
     <input type="text" /><br/>
     <input type="text" /><br/>
     <button>Right align me</button>
</div>

或

<div style=" text-align: right; display: inline:block">
     <input type="text" /><br/>
     <input type="text" /><br/>
     <input type="text" /><br/>
     <button>Right align me</button>
</div>

你也可以使用一张好的旧桌子，但不建议这样做。

<table style="text-align:right">
    <tr><td>
         <input type="text" /><br/>
         <input type="text" /><br/>
         <input type="text" /><br/>
         <button>Right align me</button>
    </td></tr>
</table>

Answer 4

只需浮动输入和按钮，同时清除br标签中的浮动。

<style>
    input { float: right; }
    br { clear:both;}
    button { float:right;}
</style>

Answer 5

只需float:right指定元素中的元素，因此它们将在this example中正确对齐。

Answer 6

<div style="float: left;">
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <button style="float: right;">Right align me</button>
</div>
<div style="clear: both;"></div>

将元素包装在div中。向左浮动div将左对齐并使其大小符合其内容的大小。向右浮动按钮会将按钮向右冲洗。如果您希望在此div之后添加的元素位于其下方而不是右侧，则会显示clear div。

Answer 7

要完成您要寻找的内容，请尝试以下方法：

<table>
<tr>
<td>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td><button>Right align me</button></td>
</tr>
</table>