css width属性未正确应用

时间:2018-05-13 06:46:31

标签: css

正如您所看到的,在tr中有三个表格单元格,其中包含名称价格和数量类别。我给他们每人宽30%。因此,他们应该覆盖页面的90%,但看起来他们中的三个甚至不覆盖页面的一半。虽然当我给他们每个宽度加起来100%他们实际上工作但我希望它们覆盖90%的页面,这些内容似乎无法正常工作,如您在代码段中所见。



 #flexing .welcome  .note {
  padding-bottom: 0;
}

#flexing .welcome .checkout {
  margin:10px;
}

#flexing .welcome .cart a {
  color:white;
  text-decoration: none;
  font-size:15.5px;
}

#flexing .welcome table .name {
  width:30%;
  border:1px solid red;
  color:red;
}

#flexing .welcome table .price {
  width:30%;
  border:1px solid red;
  color:red;
}

#flexing .welcome table .quantity {
  width:30%;
  border:1px solid red;
  color:red;
}

<div id="flexing">
  <div class="welcome">
    <h3>CHECK OUT</h3>
    <div class="cart"><a href="storenav/cart.html">5.00 EUR</a></div>
    <div class="note">
      <div class="checkout">
        <table>
          <tbody>
            <tr>
              <td class="name">Name</td>
              <td class="price">Price</td>
              <td class="quantity">Quantity<td>
            </tr>
            <tr>
              <td>Faction | Hero rank</td>
              <td>5.00 EUR</td>
              <td class="button">1 
                <a href="#">aa</a>
                <a href="#">aa</a>
                <a href="#">aa</a>
              </td>
            </tr>
          </tbody>	
        </table>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案