с тем же размером, что и родительский элемент с отображением: таблица-ячейка

ProgramBox

с тем же размером, что и родительский элемент с отображением: таблица-ячейка

Post author:admin
Запись опубликована:20 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

У меня есть список a , в котором некоторые содержат одну строку, другие — две строки. Как я могу заставить иметь ту же высоту и ширину, что и у его li родителя, display:table-cell и выровнять текст по вертикали?

 ul {
  display:table;
  width:700px;
}

li {
  display:table-cell;
  border-right:3px solid white;
  text-align:center;
  vertical-align:center;
  background-color:#ddd;
}

a {
  display:block;
  height:100%;      
  background-color:#aaa;
  padding:1em 1.2em;  
}

a:hover {
  background-color:red
}

 <ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

Развернуть фрагмент

Ответ №1:

height:100% будет работать только в том случае, если у всех родительских элементов установлена высота, и один из них не является процентом (если только все высоты до body и html-теги не имеют процентных высот)

Имея это в виду, мы можем установить height:100% li значение, а затем присвоить ul высоту 0 — как вы использовали display:table , таблицы всегда будут расти до высоты их содержимого

Показать фрагмент кода

 ul {
  display:table;
  width:700px;
  height:0;       /* add this */
  table-layout:fixed;
}

li {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  border-right:3px solid white;
  background-color:#ddd;
  height:100%;       /* add this */
}

a {
  display:block;
  height: 100%;      
  background-color:#aaa;
  padding:1em 1.2em;  
  box-sizing: border-box; /* add this to get rid of the big gap at the bottom */
}

a:hover {
  background-color:red
}

 <ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

Развернуть фрагмент

Обновить

Хорошо, если вы используете таблицы только для выравнивания по вертикали, тогда я бы изменил это на flex — это дает вам больше контроля над дочерними элементами:

 ul {
  list-style: none;
  display: flex;
  width: 700px;
}
li {
  display: flex;
  margin-right: 3px;
  background-color: #ddd;
  box-sizing: border-box;
  flex-grow: 1;
  flex-basis: 0;
}
a {
  display: flex;
  align-items: center;
  text-align: center;
  flex-grow: 1;
  background-color: #aaa;
  padding: 1em 1.2em;
  box-sizing: border-box;
}
a:hover {
  background-color: red
}

 <ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

Развернуть фрагмент

1. В этом примере выравнивание по вертикали неверно.

2. Вы ничего не упомянули о вертикальном выравнивании в своем вопросе. Пожалуйста, укажите, как вы этого хотите, чтобы я мог отредактировать свой ответ, чтобы он соответствовал

3. Идеальное решение!

Ответ №2:

Вы можете применить отступы и цвет фона к родительским <li> элементам, например:

 ul {
  display:table;
  width:500px;
}

li {
  display:table-cell;
  border-right:3px solid white;
  text-align:center;
  vertical-align:center;
  padding:1em 1.2em; 
  background-color:#aaa;
}

a {
  display:table-cell;
  height:100%; 
  vertical-align:middle;
}

a:hover {
  background-color:red
}

 <ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

Развернуть фрагмент

1. Тогда выравнивание по вертикали не идеально

2. OK — обновил ответ, чтобы сделать <a> элементы display:table-cell , и vertical-align:middle . Это то выравнивание, которое вам нужно?

3. Обычно вы хотели бы иметь возможность щелкнуть весь li элемент здесь. Но теперь доступна только текстовая часть.

4. Мне нужно, чтобы весь блок был интерактивным

Ответ №3:

Очень быстрое решение — изменить display настройку на ul flex :

 ul {
  display:flex;
  width:700px;
}

li {
  display:table-cell;
  border-right:3px solid white;
  text-align:center;
  vertical-align:center;
  background-color:#ddd;
}

a {
  display:block;
  height:100%;      
  background-color:#aaa;
  padding:1em 1.2em 0 1.2em;  
}

a:hover {
  background-color:red
}

 <ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

Развернуть фрагмент

(Я также изменил на заполнение снизу, для a которого было слишком много)

Ответ №4:

Во-первых, вы не можете установить одинаковую высоту для них li > a , не установив для них значение CSS white-space: nowrap; , если вы не добавите некоторые исправления height:200px; в CSS (не рекомендуется)

Вы можете попробовать это.

 li {
    display: table-cell;
    border-right: 3px solid white;
    text-align: center;
    vertical-align: center;
    background-color: #ddd;
    width: 10%;
}
a {
    display: block;
    background-color: #aaa;
    white-space: nowrap;
}

в элементе добавляется 10% ширины li для динамической настройки ширины в зависимости от родительского размера ul .