订购两列，避免跳到新行答案

【问题标题】：Ordering two columns, avoiding skip to new line订购两列，避免跳到新行
【发布时间】：2012-11-28 12:20:28
【问题描述】：

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

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

【问题讨论】：

您在width: 150px 后面漏掉了一个分号。解决这个问题，一切都很好。

标签： html css two-columns

【解决方案1】：

在width:150px 之后缺少分号;

纠正它。有效

DEMO

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

在width:150px 之后，你迷失了自己的风格;

试试这个：JS Bin

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

【讨论】：

【解决方案4】：

试试这个：

.input{
  display:inline
}

【讨论】：

【解决方案5】：

将display:block; 放入.input：

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

【讨论】：