我无法看到任何理由，边框将添加到HTML元素的宽度（仅在一侧） [英] A border is adding to a HTML element's width (only on one side) for no reason I can see

问题描述

我正在尝试创建此价格列，并且一直在修改教程的代码，并且一切都很顺利，直到我在.price部分添加了边框为止。边框为元素增加了一些额外的宽度，但仅限于右侧。我试图看看是否有另一个div是原因，或者是一些Chrome Dev Tools忘记了保证金/填充值的问题，但我什么都看不到。

I'm trying to create this price column, and have been modifying the code of a tutorial, and everything was going fine until I added a border to .price section of it. The border added some extra width to the element, but only on the right side. I tried to see if another div was the reason, or some forgotten about margin/padding values with Chrome Dev Tools, but I can't see anything.

我真的会感谢任何帮助找出是什么导致额外的宽度。价格div

I would really appreciate any help with finding out what is causing the extra width to .price div

以下是html：

  <ul class="pricing_table">
   <li></li>
   <li class="price_block">
      <h3>Web Development</h3>
      <div class="price">
         <div class="price_figure">
            <span class="price_number">$9.99</span>
            <span class="price_tenure">per month</span>
         </div>
      </div>
      <ul class="features">
         <li>2GB Storage</li>
         <li>5 Clients</li>
         <li>10 Active Projects</li>
         <li>Free Goodies</li>
         <li>24/7 Email support</li>
      </ul>
      <div class="buynow">
         <a href="#" class="action_button">Buy Now</a>
      </div>
   </li>
</ul>

以下是CSS：

Here is the CSS:

* {
margin: 0; 
padding: 0;
}

li {
  list-style:none;
}

body {
font-family: roboto;
}

h3 {
  font-family: lato; 
}

.pricing_table {
line-height: 150%; 
font-size: 20px; 
margin: 0 auto; 
width: 75%;
max-width: 400px; 
padding-top: 10px;
margin-top: 100px;

}

.price_block, .price_block_blue {
width: 100%; 
color: black;
background-color: white;
float: left; 
list-style-type: none; 
transition: all 0.25s; 
position: relative; 
box-sizing: border-box;
margin-bottom: 10px; 

}

.pricing_table h3 {
text-transform: uppercase; 
padding: 5px 0; 
background: white; 
margin: -10px 0 0 0;
text-align: center;
border: 3px solid black;
border-bottom: 0px solid transparent;
}

.price {
display: table; 
background: red; 
width: 100%; 
margin: 0;
padding: 0;
height: 70px;
text-align: center;
border: 3px solid black;
border-top:0px solid black;
border-bottom:0px solid black;
}

.price_blue {
display: table; 
background: blue; 
width: 100%; 
height: 70px;
text-align: center;
}
.price_figure {
font-size: 24px; 
text-transform: uppercase; 
vertical-align: middle; 
display: table-cell;
}
.price_number {
font-weight: bold; 
padding: 10px 0 0 0; 
display: block;
}
.price_tenure {
font-size: 11px; 
}

.features {
background: #fff; 
color: #000;
text-align: center;
border: 3px solid black;
border-bottom: 0px solid transparent;
border-top: 0px solid transparent;
}
.features li {
padding: 8px 15px;
border-bottom: 1px solid #ccc; 
font-size: 11px; 
list-style-type: none;
}

.buynow {
padding: 15px; 
background: white;
text-align: center;
border: 3px solid black;
border-top: 0px solid black;
}
.action_button {
text-decoration: none; 
color: white; 
font-weight: bold; 
border-radius: 5px; 
background: red; 
padding: 5px 20px; 
font-size: 11px; 
text-transform: uppercase;
}

.price_block:hover,.price_block_blue:hover {
box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5); 
transform: scale(1.04) translateY(-5px); 
z-index: 1; 
border-bottom: 0 none;
}
.price_block:hover .price {
background: yellow; 
/*box-shadow: inset 0 0 45px 1px #ADD8E6;*/
}

.price_block_blue:hover .price_blue {
background: yellow; 

}
.price_block:hover h3{
background: black;
color: white;
}
.price_block_blue:hover h3 {
background: black;
color: white;
}

.price_block:hover .action_button, .price_block_blue:hover .action_button {
background: linear-gradient(#F9B84A, #DB7224); 
}

推荐答案

，它会被添加到您的整体宽度。所以.price的实际宽度是100％+ 3px（左边界）+ 3px（右边界）。要使总宽度包括填充和边框，请使用框大小：

Since you are adding a border, it gets added to your overall width. So the actual width of .price is 100% + 3px (left border) + 3px (right border). To have the total width include padding and borders, use box-sizing:

.price {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

这篇关于我无法看到任何理由，边框将添加到HTML元素的宽度（仅在一侧）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！