Ширина в процентах от границы

Question

Допустим, я хотел сделать горизонтальную навигационную панель с пятью ссылками, и я установил ширину на 20%. Как только я добавляю границу в 1 пиксель к своим ссылкам, они становятся больше 20%, и последняя ссылка перемещается на новую строку! Как я могу обойти эту проблему?

Я надеялся, что CSS позволит мне задать отрицательное значение заполнения, чтобы граница на самом деле была над элементом, а не вокруг него, но это не учитывает.

Answer 1

Если вам нужен IE6 / 7 для игры, вам понадобится дополнительный внутренний элемент или вы можете попробовать отрицательные поля. Я рекомендую использовать список для навигации и добавлять границы к самим ссылкам следующим образом:

<ul id="nav">
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul>

То, что , безусловно, ( обновление: раньше. В HTML5 теперь можно использовать элемент nav вокруг списка ), наиболее семантическую разметку для навигации. Тогда ваш CSS просто:

#nav li {
  float: left;
  width: 20%;
}

#nav li a {
  display: block;
  border: 1px solid #000;
}

ИЛИ: для дополнительного удовольствия вы можете вместо этого попробовать декларацию размера блока CSS3, которая теперь доступна во всех современных браузерах (не IE6 / 7) с некоторой помощью:

#nav li {
  /* Opera 8.5+ and CSS3 */
  box-sizing: border-box;
  /* Firefox 1+ */
  -moz-box-sizing: border-box;
  /* IE8 */
  -ms-box-sizing: border-box;
  /* Safari 3+ */
  -webkit-box-sizing: border-box;

Answer 2

Граница -1px может работать. YMMV.

Answer 3

Нет, блочная модель добавляет границу к итоговому значению, поэтому я не буду смешивать их, если нужно добавить определенную ширину, в вашем случае 100%, поместить div (или некоторый элемент блока) внутри вашего объекта это должно быть 20% и сделать это 100% с рамкой.