В настоящее время я занимаюсь разработкой своего сайта, и на данный момент я пытаюсь набросать элементы ценообразования моего 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;
}
Кроме того, если кто-то видит здесь вещи, которые могут быть улучшены, я хотел бы услышать это. Если есть что-то, что я могу сократить или написать, например, лучше.
Добавьте 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
. Как вы можете видеть, первая имеет точно такую же проблему, которую вы пытаетесь решить.
ul
{
padding:0px;
margin:0px;
}