HTML & CSS: как создать четыре вкладки одинакового размера, которые заполняют 100% ширину?

Я пытаюсь создать панель навигации для своего сайта. Я хотел бы, чтобы он состоял из:

  • четыре вкладки одинакового размера с текстовым центром на каждой вкладке.
  • Они должны заполнить всю ширину страницы.

Я бы очень хотел, чтобы дизайн был гибким и удобным для браузера. Я пробовал различные методы поплавка, но я не могу заставить его работать. Надеюсь, вы сможете мне помочь!

спасибо.

6
css html navigation

3 ответов

HTML-код

EDIT: это 2015, и HTML5 был там некоторое время; следующий код должен быть внутри nav элемент (html5doctor) С атрибутом landmark ARIA role="navigation" на нем (и 99,9% времени будет уникальным на любой данной странице).

панель навигации должна использовать неупорядоченный список ссылок:

<ul id="nav">
  <li><a href="#">One</a></li>
  <li><a href="#"> Second</a></li>
  <li><a href="#">Third</a></li>
  <li><a href="#">Fourth and last, so large that... worst case</a></li>
</ul>

в CSS

EDIT2: это 2017, просто используйте Flexbox (С или без flex-wrap: wrap)

inline-block полезно, но имеет один недостаток: пробелы между двумя элементами должны тщательно управляться. Ли удалены или нет </li> в HTML5 или </li> в начале следующей строки застряли как </li><li>next item или другие трюки, вы все равно должны что-то сделать, или это создаст разрыв ~4px между 2 элементами.

25% + 25% + 25% + 25% не равно 100% во всех браузерах, если общее число не кратно 4. Каждый браузер имеет свое округление метод.

если вы хотите, чтобы элементы имели общую ширину 100% и равную ширину, другой метод-использовать display: table (и table-cell) С table-layout: fixed чтобы заставить браузеры использовать другое алгоритм таблицы, тот, который не пытается адаптировать ширину ячеек к контенту, но уважает ширину, требуемую дизайнером / разработчиком вероятный.

ul {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
}
#nav {
  display: table;
  table-layout: fixed;
  text-align: center;
}
#nav li {
  display: table-cell;
  width: 25%;
  padding-right: 1px;
  height: auto;
  vertical-align: bottom;
}
#nav a {
  display: block;
  min-height: 100%;
  padding: 4px 10px;
  background-color: #222;
  color: white;
  border-radius: 6px 6px 0 0;
}

Скрипка

http://jsfiddle.net/PhilippeVay/aHCy3/1/
edit:http://jsfiddle.net/PhilippeVay/aHCy3/2/ с другим методом для пространства между каждой вкладкой, любезно предоставлено моим коллегой.

15

вам не нужны поплавки для этого. Просто установите ширину в 25%, или немного меньше, чем 25%. Если вы используете этот элемент уровня блока display: inline-block. Это будет работать для всех размеров браузера, а также реагировать на изменение размера окна.

HTML-код

<div class="nav">Nav 1</div>
<div class="nav">Nav 2</div>
<div class="nav">Nav 3</div>
<div class="nav">Nav 4</div>​

в CSS

body, html {
    width: 100%;
    padding: 0;
    margin: 0;
}
.nav {
    width: 24%; /*Slightly less than 1/4th of the width*/ 
    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: center;
}​​

Live demo

4

css:

.tab {
    float: left;
    width:25%;
    height:25px;
    background:black;
    border:1px solid #fff;
    box-sizing: border-box;
}​

HTML-код:

<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>​

jsfiddle: http://jsfiddle.net/zP7Xh/6/

0