[英]Border doesn't adapt to list-style: none;
I'm currently working on designing my site, and at the moment I'm trying to sketch down the pricing elements of my SaaS. 我目前正在设计网站,此刻正试图勾勒出SaaS的定价要素。 I want to have a border around my divs, but my problem is that the border goes where the list style "is", even though I have written it to be none. 我想在div周围有一个边框,但是我的问题是,即使我将其写为none,边框也会到达列表样式“ is”所在的位置。 Or at least I think that is the error. 或者至少我认为那是错误。 I have no clue how to fix this! 我不知道如何解决这个问题! What am I doing wrong here? 我在这里做错了什么?
Here is my HTML code: 这是我的HTML代码:
<div id='pricing_plan2' class="grid_4">
<ul class="plan">
<li class="plan_price2">
<span id="recommend">WE RECOMMEND</span><BR />
<span class="dollar">$</span>
<span class="price">14.99</span>
<span class="month">/month</span>
</li>
<li class="plan_title2">
STANDARD ACCOUNT
</li>
<li class="features">1GB storage</li>
<li class="features">5GB bandwith</li>
<li class="features">2 domains</li>
<li class="features">3 databases</li>
<li class="features">1 FTP account</li>
<li class="features">25 Email Accounts</li>
<li class="buynow"><a href="#">Choose standard plan</a></li>
</ul>
here is the CSS: 这是CSS:
body {
background-color: #fff;
}
#recommend {
color: #becdd6;
}
.plan_title {
background: #ecf2f6;
padding:20px;
color: #000;
text-align: center;
border-bottom: 1px solid #d9dee1;
letter-spacing: 2px;
font-weight: bold;
}
.plan_price {
color: #479ccf;
background: #ecf2f6;
text-align: center;
padding: 10px 0 0 0;
}
.dollar {
font-size: 25px;
}
.price {
font-size: 45px;
font-weight: bold;
}
.month {
font-size: 15px;
}
.features {
background:blue;
}
.features:nth-child(odd){
background: none repeat scroll 0 0 #F7F7F7;
font-size: 13px;
font-weight: bold;
padding: 10px 5px;
}
.features:nth-child(even){
background: none repeat scroll 0 0 #fff;
font-size: 13px;
font-weight: bold;
padding: 10px 5px;
}
.buynow {
background: #ecf2f6;
text-align: center;
padding: 15px;
}
.buynow a {
padding: 10px;
color: #FFF;
background-image:url('../img/btn-bg.png');
border: 1px solid #5c9439;
text-decoration: none;
}
#pricing_plan1 ul, #pricing_plan2 ul, #pricing_plan3 ul {
list-style: none;
font-family: "Helvetica Neue";
border: 1px solid #d9dee1;
}
Also if somebody sees things here that could be improved, I would love to hear it. 另外,如果有人在这里看到可以改进的地方,我也很想听听。 If there are something I can shorten down, or write better for example. 如果有什么我可以缩短或例如写得更好。
Add padding-left: 0
to your ul
style declaration. 在您的ul
样式声明中添加padding-left: 0
。
#pricing_plan1 ul, #pricing_plan2 ul, #pricing_plan3 ul {
list-style: none;
font-family: "Helvetica Neue";
border: 1px solid #d9dee1;
padding-left: 0px;
}
<ul>
has default left padding, and that's the reason of your code output. <ul>
具有默认的左填充,这就是代码输出的原因。
Check jsFiddle demo . 检查jsFiddle演示 。 Both lists have list-style
set to none
, but only the second one has additional left-padding: 0
. 两个列表的list-style
设置为none
,但是只有第二个列表具有附加的left-padding: 0
。 As you can see, the first one has exactly the same problem you're trying to solve. 如您所见,第一个问题与您要解决的问题完全相同。
ul
{
padding:0px;
margin:0px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.