在我正在构建的网站上，我导入了一个响应式 CSS 定价表。它很棒并且运行良好，但左边距似乎有 40 像素的填充，因此底部边框不会穿过功能部分中的整个表格。我调整了 css 并使用 firebug 尝试更改其他 css 设置但没有成功。有趣的是，Firebug 会显示上方表格的紫色填充以及功能列表，但不会显示表格标题。
我只是找不到导致此填充问题的代码或设置。我真的需要文本和边框来横跨整列。
我花了 4 个小时尝试排除故障，现在很沮丧，需要帮助(我喜欢了解自己 > 我是如何学习的)!
下面的 CSS 和 HTML 代码 - 但由于发布时的大小限制，我确信我可能遗漏了一些影响表格的父设置。由于新手无法发布屏幕截图，但 Forefox 中的 Firebug 清楚地显示了功能列表以及整个表格一侧的额外填充(紫色)。
请原谅任何礼仪或命名错误 - 我对所有这些都是新手 > 自学 HTML 和 CSS。提前致谢!
页面/站点:www.realatize.com/plans.html
表格的 CSS:
/******Tables*******/
/*----------
Blocks
----------*/
/*Pricing table and price blocks*/
.pricing_table {
line-height: 150%;
font-size: 12px;
margin: 0 auto;
width: 100%;
max-width: 940px;
padding-top: 10px;
margin-top: 100px;
}
.price_block {
text-align: center;
width: 100%;
color: #fff;
float: left;
list-style-type: none;
transition: all 0.25s;
position: relative;
box-sizing: border-box;
margin-bottom: 10px;
border-bottom: 1px solid transparent;
}
/*Price heads*/
.pricing_table h3 {
text-transform: uppercase;
padding: 8px 0;
background: #333;
margin: -10px 0 1px 0;
}
/*Price tags*/
.price {
display: table;
background: #444;
width: 100%;
height: 70px;
}
.price_figure {
font-size: 24px;
text-transform: uppercase;
vertical-align: middle;
display: table-cell;
}
.price_number {
font-weight: bold;
display: block;
}
.price_tenure {
font-size: 11px;
}
/*Features*/
.features {
background: #E5E5E5;
color: #000;
}
.features li {
padding: 15px 15px 10px 2px;
border-bottom: 1px solid #ccc;
font-size: 12px;
list-style-type: none;
}
.footer {
padding: 25px;
background: #E5E5E5;
}
.action_button {
text-decoration: none;
color: #fff;
font-weight: bold;
border-radius: 5px;
background: linear-gradient(#666, #333);
padding: 8px 20px;
font-size: 11px;
text-transform: uppercase;
}
.price_block: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:linear-gradient(#DB7224, #F9B84A);
box-shadow: inset 0 0 45px 1px #DB7224;
}
.price_block:hover h3 {
background: #222;
}
.price_block:hover .action_button {
background: linear-gradient(#F9B84A, #DB7224);
}
@media only screen and (min-width : 480px) and (max-width : 768px) {
.price_block {width: 50%;}
.price_block:nth-child(odd) {border-right: 1px solid transparent;}
.price_block:nth-child(3) {clear: both;}
.price_block:nth-child(odd):hover {border: 0 none;}
}
@media only screen and (min-width : 768px){
.price_block {width: 20%;}
.price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
.price_block:last-child {border-right: 0 none;}
.price_block:hover {border: 0 none;}
}
.skeleton, .skeleton ul, .skeleton li, .skeleton div, .skeleton h3, .skeleton span, .skeleton p {
border: 5px solid rgba(255, 255, 255, 0.9);
border-radius: 5px;
margin: 7px !important;
background: rgba(0, 0, 0, 0.05) !important;
padding: 0 !important;
text-align: left !important;
display: block !important;
width: auto !important;
height: auto !important;
font-size: 10px !important;
font-style: italic !important;
text-transform: none !important;
font-weight: normal !important;
color: black !important;
}
.skeleton .label {
font-size: 11px !important;
font-style: italic !important;
text-transform: none !important;
font-weight: normal !important;
color: white !important;
border: 0 none !important;
padding: 5px !important;
margin: 0 !important;
float: none !important;
text-align: left !important;
text-shadow: 0 0 1px white;
background: none !important;
}
.skeleton {
display: none !important;
margin: 100px !important;
clear: both;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<link rel="stylesheet" href="/files/theme/animate.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400italic,300italic' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="/files/theme/jquery.scrollTo.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 350) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
</head>
<body class=' wsite-theme-light'>
<div class="section header">
<div class="w-container-top">
<div class="w-row">
<div class="w-col w-col-4 company-column">
<div class="company-title animated fadeInDown">{logo}</div>
</div>
<div class="w-col w-col-8 nav-bar">
<div id="nav">{menu}</div>
</div>
</div>
</div>
</div>
<div>
<div style="min-height: 260px; padding-top: 80px;" class="content-bg">
<div class="w-container-top">
<h1 style="font-size: 22px;">{content-bg:text global="false"}</h1><br/>
<div class="subtitle">{subtitle:text global="false"}</div>
</div>
</div>
</div>
<div class="section">
<div class="w-container">
<div class="w-row">
<div class="w-col w-col-12">{col-full:content global="false"}</div>
</div>
</div>
</div>
<ul class="pricing_table">
<li class="price_block">
<h3>Listing DIY</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$299</span>
</div>
</div>
<ul class="features">
<li>1GB Storage</li>
<li>2 Clients</li>
<li>5 Active Projects</li>
<li>5 Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
<li class="price_block">
<h3>Listing MLS</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$499</span>
</div>
</div>
<ul class="features">
<li>2GB Storage</li>
<li>5 Clients</li>
<li>10 Active Projects</li>
<li>10 Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
<li class="price_block">
<h3>Pro</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$999</span>
</div>
</div>
<ul class="features">
<li>5GB Storage</li>
<li>10 Clients</li>
<li>20 Active Projects</li>
<li>20 Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
<li class="price_block">
<h3>Premium</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$1999</span>
</div>
</div>
<ul class="features">
<li>Unlimited Storage</li>
<li>Unlimited Clients</li>
<li>Unlimited Projects</li>
<li>Unlimited Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
<li class="price_block">
<h3>Elite</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$4999</span>
</div>
</div>
<ul class="features">
<li>1GB Storage</li>
<li>2 Clients</li>
<li>5 Active Projects</li>
<li>5 Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
</ul>
<ul class="skeleton pricing_table" style="margin-top: 100px; overflow: hidden;">
<li class="label" style="margin: 0 none;">ul.pricing_table</li>
<li class="price_block">
<span class="label">li.price_block</span>
<h3><span class="label">h3</span></h3>
<div class="price">
<span class="label">div.price</span>
<div class="price_figure">
<span class="label">div.price_figure</span>
<span class="price_number">
<span class="label">span.price_number</span>
</span>
<span class="price_tenure">
<span class="label">span.price_tenure</span>
</span>
</div>
</div>
<ul class="features">
<li class="label">ul.features</li>
<br /><br /><br />
</ul>
<div class="footer">
<span class="label">div.footer</span>
</div>
</li>
<li class="price_block" style="opacity: 0.5;">
<span class="label">li.price_block</span>
<h3><span class="label">h3</span></h3>
<div class="price">
<span class="label">div.price</span>
<div class="price_figure">
<span class="label">div.price_figure</span>
<span class="price_number">
<span class="label">span.price_number</span>
</span>
<span class="price_tenure">
<span class="label">span.price_tenure</span>
</span>
</div>
</div>
<ul class="features">
<li class="label">ul.features</li>
<br /><br /><br />
</ul>
<div class="footer">
<span class="label">div.footer</span>
</div>
</li>
<li class="price_block" style="opacity: 0.25;">
<span class="label">li.price_block</span>
<h3><span class="label">h3</span></h3>
<div class="price">
<span class="label">div.price</span>
<div class="price_figure">
<span class="label">div.price_figure</span>
<span class="price_number">
<span class="label">span.price_number</span>
</span>
<span class="price_tenure">
<span class="label">span.price_tenure</span>
</span>
</div>
</div>
<ul class="features">
<li class="label">ul.features</li>
<br /><br /><br />
</ul>
<div class="footer">
<span class="label">div.footer</span>
</div>
</li>
</ul>
<script src="/files/theme/prefixfree.min.js" type="text/javascript"></script>
<div class="section">
<div class="w-container">
<div class="w-row">
<div class="w-col w-col-3">{col-3-first:content global="false"}</div>
<div class="w-col w-col-3">{col-3-second:content global="false"}</div>
<div class="w-col w-col-3">{col-3-third:content global="false"}</div>
<div class="w-col w-col-3">{col-3-fourth:content global="false"}</div>
</div>
</div>
</div>
<div class="section bottom">
<div class="w-container">
<div class="w-row secondary-row">
<div class="w-col w-col-4">{col-tenth:content}</div>
<div class="w-col w-col-4">{col-eleventh:content}</div>
<div class="w-col w-col-2">{col-twelvth:content}</div>
<div class="w-col w-col-2">{col-thirteenth:content}</div>
<div style='padding: 20px 20px 0px 20px; width:100%; text-align:center;'>{bottom}</div>
</div>
</div>
</div>
<div style='display:none'>{content}</div>
<a href="#" class="scrollup">Scroll</a>
</body>
</html>
<div id="footer">
<div id="footer-content">
<div style="visibility:hidden">
{footer}</div>
网站我得到了免费的 CSS 表/源代码: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/build-a-responsive-pricing-table-with-neat-hover-states/
最佳答案
看起来你需要 ul.features { padding: 0; }。您是否正在使用某种 CSS 重置？这是理想的解决方案。
关于响应定价表的 HTML/CSS 框大小或填充问题 - 找不到父设置 - 实例 - 新手 :-)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19367527/