1

我是 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;}

​</p>

我想改为

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

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

4

5 回答 5

2

演示

您好，现在您的标记错误，请更改为您的标记 html 和 css写入

像这样

HTML

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


    <p><label>Level: </label><span>60</span>
        <label>Score: </label><span>5000</span></p>
</div>

CSS

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

现场演示

于 2012-11-16T04:52:08.590 回答
0

使用 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; }
于 2012-11-16T04:49:16.193 回答
0

我认为你甚至不需要修改你的 CSS，摆脱 <p>

当然 label 应该真正连接到 <input> 元素

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

给

约翰 男 年龄 35
等级 100 分数 1000

作为一个后盾，如果你真的想使用 <p> 然后使用 style

p { display: inline-block;}​
于 2012-11-16T04:52:02.320 回答
0

你可以这样使用。

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>
于 2012-11-16T04:56:41.613 回答
0

如前所述，label与不是表单元素的东西相关联是有问题的。这可能更适合定义列表。在这里使用表格也可能在语义上是正确的，因为您有表格数据要显示为表格。

定义列表示例

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>
于 2012-11-16T05:34:18.470 回答