Question

我试图创建这个价格列，并且一直在修改教程的代码，一切都很顺利，直到我添加了一个边框到.price部分。边框为元素添加了一些额外的宽度，但仅在右侧。我试图看看是否有另一个div是原因，或者有人忘记了Chrome Dev Tools的边距/填充值，但我看不到任何内容。

我真的很感激任何帮助，找出造成额外宽度的原因.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：

* {
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); 
}

Answer 1

由于您要添加边框，因此会将其添加到整体宽度中。因此.price的实际宽度为100％+ 3px（左边框）+ 3px（右边框）。要使总宽度包括填充和边框，请使用box-sizing：

//li[@class='listing-post']//div[@class='listing-date']/text()

边框正在添加到HTML元素的宽度（仅在一侧），我无法理解

1 个答案: