html - CSS对齐文本和输入字段

Question

假设破折号代表 HTML 输入文本字段，拉丁文本是纯文本，我该如何更改以下格式

Lorep ipsum -----------
   Dolor sit amet ------------
  Consectetuer adipiscing elit -----------

到这个使用CSS？

                 Lorep ipsum ------------
              Dolor sit amet ------------
Consecteteur adipiscing elit ------------

还有这个？

Lorep ipsum                  ------------
Dolor sit amet               ------------
Consecteteur adipiscing elit ------------

Answer 1

有时使用表也不错，

<table>
    <tr><td>Lorep ipsum</td><td>-----------</td></tr>
    <tr><td>Dolor sit amet</td><td>-----------</td></tr>
    <tr><td> Consectetuer adipiscing elit</td><td>-----------</td></tr>
</table>

演示

Answer 2

HTML

<p>
    <span class="one">test</span>
    <input type="text" />
</p>
<p>
    <span class="one">test</span>
    <input type="text" />
</p>
<p>
    <span class="one">test</span>
    <input type="text" />
</p>
<p>
    <span class="two">test</span>
    <input type="text" />
</p>
<p>
    <span class="two">test</span>
    <input type="text" />
</p>
<p>
    <span class="two">test</span>
    <input type="text" />
</p>

CSS

.one{
    width:100px;
    display:inline-block;
    text-align:right;
}

.two{
    width:100px;
    display:inline-block;
    text-align:left;
}

演示：http: //jsfiddle.net/d4LAC/

Answer 3

要么float他们，要么text-align在文本上使用。

jsFiddle 演示... 或 ...替代 jsFiddle 演示

HTML

<div class="form">
    <div>
        <label>Some random text:</label>
        <input type="text" name="name">
    </div>
    <div>
        <label>More text:</label>
        <input type="text" name="name">
    </div>
    <div>
        <label>Even more text:</label>
        <input type="text" name="name">
    </div>
</div>

CSS

div {
    width:300px;
    overflow:hidden;
    text-align:right;
}

label {
    float:left;    
}
input {
    float:right;    
}