Question

我是css的新手。我的jsfiddle在这里 http://jsfiddle.net/PAHdH/

<div>
    <label>Name: </label><p>John</p>
    <label>Age: </label><p>35</p>
    <label>Level: </label><p>60</p>
    <label>Score: </label><p>5000</p>
</div>

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 150px;
    text-align: left;
    color:black;
}

p {margin-bottom:2px; padding:0;}

我想改为

姓名：John年龄：35岁
等级：60得分：5000

它应该像一个有4列的表。

Answer 1

的 Demo 的

您好标记错误请更改为标记html和css 写

就像这样

<强> HTML

<div> <label>Name: </label> John <label>Age: </label>35 <label>Level: </label>60 <label>Score: </label>5000 </div>

<强>的CSS

label, span{ float:left; margin:1px; background:rgba(0,0,0,0.3); width:150px; padding:2px; } p{ overflow:hidden; }

的 Live Demo 的

Answer 2

使用P，避免了这个想法，因为它在元素之前和之后生成换行符。我希望这会有所帮助。

<div> 
  <p>
    <label>Name: <span>John</span></label>
    <label>Age: <span>35</span></label>
  </p>
  <p>
    <label>Level: <span>60</span></label>
    <label>Score: <span>5000</span></label>
  </p>
</div>

我在需要创建新行的地方使用P，并将P改为SPAN .. 这是CSS

label {
    float: left;
    width: 150px;
    text-align: left;
    color:black;
    border:#000 1px solid;
}

span {margin-bottom:2px; padding:0; }
p { clear:both; }

Answer 3

我认为你甚至不需要修改你的CSS，摆脱＆lt; p＆gt;

当然标签应该真正连接到＆lt; input＆gt;元件

<label for="name">John</label>
<span id="name">male<span>
<label for="age">Age</label>
<span id="age">35<span>

<br/>

<label for="level">Level</label>
<span id="level">100<span>
<label for="score">Score</label>
<span id="score">1000<span>

给出

John男35岁等级100得分1000

如果您真的想使用＆lt; p＆gt;然后使用风格

p { display: inline-block;}

Answer 4

你可以这样使用。

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 150px;
    text-align: left;
    color:black;
}


span {margin-bottom:2px; padding:0;margin-left:10px;}


<div>
    <label>Name:<span>John</span><span>Age:</span><span>35</span></label>
</div>

Answer 5

正如已经提到的，将label与不是表单元素的东西联系起来是有问题的。这可能更适合definition list。在这里使用表格也可能在语义上是正确的，因为您有表格数据显示为表格。

定义列表示例

HTML 的

<dl>
    <dt>Name:</dt>
    <dd>Jon</dd>
    <dt>Age:</dt>
    <dd>35</dd>
    <dt>Level:</dt>
    <dd>10</dd>
    <dt>Score:</dt>
    <dd>100</dd>
</dl>

CSS

dl
{
    position:releative;
}


dd
{
    float:left;
    width:40%;
}

dt
{
    float:left;
    width:10%;
    font-weight:bold;
}

小提琴：http://jsfiddle.net/xwavM/

表格示例

<table>
   <tbody>
      <tr> 
         <th>Name:</th>
         <td>John</td>
         <th>Age:</th>
         <td>35</td>
      </tr>
      <tr> 
         <th>Level:</th>
         <td>100</td>
         <th>Score</th>
         <td>100</td>
      </tr>
   </tbody>
</table>

如何将2个字段对齐成1行？

5 个答案: