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

要麼float他們，或在文本中使用text-align。

jsFiddle demo ......或者...... alternative jsFiddle demo

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

Answer 2

有時，這不是一個壞主意，用表，

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

DEMO

Answer 3

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/