У меня есть контейнер MainHeader, ширина которого составляет 688 пикселей. Мои кнопки - 212 пикселей каждый (всего 336 пикселей). Теперь, поскольку я хотел, чтобы у этой кнопки были одинаковые поля слева и справа, так что я имел левый margin 8.6px и правый margin также 8.6px. Но одна из моих кнопок входит в следующую строку. Что я делаю неправильно в расчете.
Мой стиль CSS
.MainHeader{
height:100px;
width:688px;
padding:inherit;
border:1px solid blue;
background-color:black;
}
.BodyContainer{
height:788px;
width:688px;
padding:inherit;
border: 1px solid blue;
background-color:white;
}
.MainFooter{
height: 100px;
width: 688px;
padding:inherit;
border: 1px solid blue;
background-color:black;
}
.Button{
display:block;
height:30px;
width:150px;
padding :0px 5px;
background:darkorange;
border:1px solid black;
color:white;
text-align:center;
font:bold 14px/30px arial;
background: linear-gradient(white, blue);
border-radius: 5px;
}
a.Button{
text-decoration: none;
}
a.Button:hover{
background: grey;
}
ul{
padding: 0;
}
li{
list-style:none;
display:inline-block;
margin-right: 8px;
margin-left: 8.6px;
}
Мой HTML-код
<div class="MainHeader">
<div>
<div>
<ul>
<li><a class="Button" href="http://www.google.com">Homepage</a></li>
<li><a class="Button" href="http://www.google.com">Search</a></li>
<li><a class="Button" href="http://www.google.com">Contact Us</a></li>
</ul>
</div>
</div>
</div>
Поскольку у вас есть граница 1px на дне, это добавляет как левый, так и правый 1px. Поэтому вам нужно удалить обе стороны 2px.remember, чтобы очистить: в конце концов