html - 边框不适应列表样式：无；

Question

我目前正在设计我的网站，目前我正在尝试勾勒出我的 SaaS 的定价元素。我想在我的 div 周围有一个边框，但我的问题是边框位于列表样式“所在”的位置，即使我已经将它写成无边框。或者至少我认为这是错误的。我不知道如何解决这个问题！我在这里做错了什么？

这是我的 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>

这是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;
}

另外，如果有人在这里看到可以改进的东西，我很想听听。如果有什么我可以缩短，或者写得更好，例如。

Answer 1

添加padding-left: 0到您的ul样式声明中。

#pricing_plan1 ul, #pricing_plan2 ul, #pricing_plan3 ul {
    list-style: none;
    font-family: "Helvetica Neue";
    border: 1px solid #d9dee1;
    padding-left: 0px;
}

<ul>具有默认的左填充，这就是您的代码输出的原因。

检查jsFiddle 演示。两个列表都list-style设置为none，但只有第二个有附加的left-padding: 0。如您所见，第一个问题与您要解决的问题完全相同。

Answer 2

ul
{
    padding:0px;
    margin:0px;
}