CSS属性“内联”不会在网页上给我换行

问题描述

|| 在.manager-record-header和.manager-record中，我添加了属性display: block;，我希望它为每个键入manager-record-header或manager-record的<div>创建一个新行。不知何故，-项目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>

解决方法

这是您的问题的小提琴。 http://jsfiddle.net/jasongennaro/YQQHc/ 看起来数据最好用ѭ7表示。我说忘了8英镑而用一张桌子。编辑像这样

<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/ , 就像@Nico所说的那样，问题出在div内容的浮动上，这意味着divs在外观上不包含跨度。通过在.manager-record-header和.manager-record上加上overflow:hidden可以轻松固定。但我同意@Jason Gennaro。对我来说，这看起来像表格数据。

不会内联属性属性换行换行给我网页网页