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/