Question

在.manager-record-header和.manager-record我添加了属性display: block;，我希望它为每个<div>我创建一个新行manager-record-header或manager-record。不知怎的，它不起作用 - 项目01和项目02出现在同一行。哪个可能是问题？

这是我的网页：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <style type="text/css">
h1 {
    font: bold 1em 'Trebuchet MS', Arial, Sans-serif;
    color: #333;
  font-size: 1.5em; color: #6297BC;
}
h1 {  } 

body {
    margin: 0;
    padding: 0;
    font: 11px/1.6em  Verdana, Tahoma, Helvetica, sans-serif;
    color: #666666; 
    background: #A9BAC3;
    text-align: center;
}

#manager-body {
    background: #FFF;
    width: 820px;
    margin: 0 auto; 
    text-align: left;
}

.manager-record-header  {
  font-size: 2em;
  padding-left: 15px;
  display: block;
  width: 100%;
}

.manager-record-header-name {
  padding-left: 5px;
  width: 350px;
  float:left;
}

.manager-record-header-quantity {
  width: 100px;
  float:left;
}

.manager-record  {
  padding-left: 15px;
  display: block;
  width: 100%;
}

.manager-record-title {
  float:left;
  padding-left: 5px;
  width: 350px;
}

.manager-record-quantity {
  float: left;
  width: 100px;
}

</style>
 </head>
<body>
<div id="manager-body">
<h1>Item pricing</h1>

    <div class="manager-record-header">
      <span class="manager-record-header-name">Item name</span>
      <span class="manager-record-header-quantity">Quantity</span>
      <span class="manager-record-quantity">Price</span>
    </div>
    <div class="manager-record">
      <span class="manager-record-title">Item 01</span>
      <span class="manager-record-quantity">10</span>
    </div>
    <div class="manager-record">
      <span class="manager-record-title">Item 02</span>
      <span class="manager-record-quantity">3</span>
    </div>
</div>

</body>
</html>

Answer 1

这是你问题的一个小提琴。

http://jsfiddle.net/jasongennaro/YQQHc/

这看起来像是table中最佳呈现的数据。我说忘记div并使用表格。

修改

像这样的东西

<table> <thead> <td>Item name</td> <td>Quantity</td> <td>Price</td> </thead> <tr> <td>Item 01</td> <td>10</td> <td>?</td> </tr> <tr> <td>Item 02</td> <td>3</td> <td>?</td> </tr> </table>

http://jsfiddle.net/jasongennaro/YQQHc/1/

Answer 2

正如@Nico所说，问题来自浮动div的内容，这意味着div不是表示性地包含跨度。

通过将overflow:hidden添加到.manager-record-header和.manager-record轻松修复。

但我同意@Jason Gennaro。这看起来像表格数据。

CSS属性“inline”没有给我一个新的网页页面

2 个答案: