Question

我正在尝试创建一个显示标签和相应文本的页面（可能是多行），但我没有从标签和同一行中的文本中获取行。

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

Answer 1

;

后缺少分号width:150px

纠正它。它的工作原理

<强> DEMO

Answer 2

缺少“;”在150px之后并且清除：在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/

Answer 3

在;

之后，你迷失了风格width:150px

试试这个：JS Bin

label {
  width:150px;
  float: left;
}

Answer 4

试试这个：

.input{
  display:inline
}

Answer 5

将display:block;放入.input：

.input{
margin-left:150px;
display: block;
}

订购两列，避免跳到新行

5 个答案: