Странное поведение при использовании вложенной табличной ячейки

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

Чтобы увидеть, что происходит, я отредактировал 2 JSFiddle, чтобы вы увидели проблему:

JSFiddle с равным содержанием

JSFiddle с одной ячейкой больше других

я использовал ul в display : table, li в display : table-cell и тег ссылки внутри li в display : table-cell,

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

Может ли кто-нибудь указать мне правильное направление? Не стесняйтесь полностью изменять CSS при необходимости, единственное требование - сохранять иерархию тегов, так как я использую Wordpres wp_menu_nav() функция, которая дает мне этот вывод.

Источник

2 ответа

Решение

Это ошибка Chrome, которая нарушает спецификации таблиц CSS:

vertical-align: baseline: Базовая линия ячейки размещается на той же высоте, что и базовая линия первого из рядов, которые она охватывает

Базовая линия ячейки - это базовая линия первого поля строки в потоке в ячейке или первой строки таблицы потока в ячейке, в зависимости от того, что наступит раньше. Если такого линейного блока или строки таблицы нет, базовая линия является нижней частью края содержимого поля ячейки.

liэлементыtable-cellс по умолчанию vertical-align: baseline, Они содержат atable-cell, который обернут внутри анонимного table-row а такжеtable, Итак, первые строки a должны быть выровнены, но кажется, что Chrome, кажется, выравнивает последние строки.

Вы можете исправить это с

#menu > li {
  vertical-align: middle;
}


body {
  margin: 0px;
}
#menu {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: table;
  width: 100%;
  height: 80px;
}
#menu > li {
  display: table-cell;
  height: 80px;
  width: calc(100% / 6);
  border: solid 1px black;
  box-sizing: border-box;
  vertical-align: middle;
}
#menu > li > a {
  display: table-cell;
  height: 80px;
  width: calc(100% / 6);
  background: lightgrey;
  vertical-align: middle;
  box-sizing: border-box;
}
<ul id="menu">
  <li><a href="">first link</a></li>
  <li><a href="">Second link</a></li>
  <li><a href="">Third link</a></li>
  <li><a href="">Fourth link</a></li>
  <li><a href="">Fifth link</a></li>
  <li><a href="">Sixth link Sixth link Sixth link</a></li>
</ul>

Источник

Здесь решимость. https://jsfiddle.net/akysrs3t/7/

body {
  margin : 0px;
}

#menu {
  list-style-type : none;
  margin : 0px;
  padding : 0px;
  display : table;
  width : 100%;
  table-layout: fixed; /* makes the with distribute equally amongst the items of the menu */
}

#menu > li {
  display : table-cell;
  border : solid 1px black;
  box-sizing : border-box;
  vertical-align : middle;
  text-align: center;
}

#menu > li > a {
  display : block;
  height: 80px;
  line-height: 80px;
  background : lightgrey;
}

Вы можете увидеть результаты в примере над JSFiddle. Посмотрите на значения для раскладки таблицы: также.

Вам на самом деле не нужен calc().

Бестс, Джордж

Источник
Другие вопросы по тегам