2

ラベルと対応するテキスト (複数行の可能性があります) を表示するページを作成しようとしていますが、ラベルからの行と同じ行のテキストを取得できません。

HTML コード:

  <label for='name'>Name:</label>
 <div class='input' id='name'> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<label>Date:</label>
<div class='input' id='date'> 10.10.2012 </div>

<label>Sum:</label>
<div class='input' id='sum'>ABC </div>

CSS:

label {

width:150px
float: left;

}

.input{
margin-left:150px
}

ここにJSFiddleリンクがあります

4

5 に答える 5

2

ない ";" 150px後およびclear：両方ともdiv後

   label {
        width:150px;
        float: left;
        display: block;
        border: 1px solid red;   
    }
    .input{
        margin-left:150px;
    }

    br {
       display: block;
       clear: both;
    }

http://jsfiddle.net/DGolub/msvVc/1/

于 2012-11-28T12:32:00.790 に答える
2

後にセミコロン;がありませんwidth:150px

修正してください。できます

デモ

于 2012-11-28T12:25:42.760 に答える
1

あなたはその後あなたのスタイル;に負けましたwidth:150px

これを試してください: JS Bin

label {
  width:150px;
  float: left;
}
于 2012-11-28T12:27:12.500 に答える
0

これを試して：

.input{
  display:inline
}
于 2012-11-28T12:22:37.520 に答える
0

入れる：display:block;_.input

.input{
margin-left:150px;
display: block;
}
于 2012-11-28T12:22:50.723 に答える