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

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 2

それら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;    
}