HTML对齐挑战

Question

If I have a stack of textboxes and a button, eg

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

How can I right align the right edges of the textboxes and the button without specifying the size of everything?

Update - perhaps my question wasn't clear. Some of the answers propose right aligning everything. Which would look like this:

But I actually want the textboxes to be left aligned, but the button to right align to the edge of those text boxes. Is there a way to do this?

Answer 1

If you wrap them all in a block element (such as a <div> ), you can specify text-align: right; on that <div> , and it will align everything to the right, regardless of size.

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

---

Update:

Based on the changes to your question, would something like this work better?
It aligns the button to the very right of the longest input, and to the bottom. The only disadvantage is that if you have content below the box, you'll need to add some extra margin, so it doesn't overlap with the button.

<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

Set the widths of your input and button elements to 100%, and use a container to set their actual widths:

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

Wrap it in a div and use text-align:right and either float:left or display:inline-block on it. The first one works in ie6.

Like this:

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

or

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

You can also use a good, old table, it's not recommended though.

<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

Just float the inputs and buttons, while clearing the floats in the br tag.

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

Answer 5

只需float:right指定元素内的元素，就可以将它们右对齐，如本例所示 。

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>

Wrap the elements in a div. Floating the div left will left-align it and make its size conform to the size of its contents. Floating the button right will flush the button to the right. The clear div is there in case you want elements you add after this div to be below it, not to its right side.

Answer 7

to accomplish what you are looking for try the following:

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