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，

并不是一个坏主意

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

CSS对齐文本和输入字段

3 个答案: