Блог

Главная - Вопросы по программированию - Как я могу сделать n количество подходящей ширины?

Как я могу сделать n количество подходящей ширины?

#html #css

#HTML #css

Вопрос:

Я пытаюсь, чтобы вся ширина li соответствовала ширине моего ul, вот мой код: http://jsfiddle.net/4XR5V/2 /

Я уже видел несколько вопросов на сайте, и некоторые, похоже, работают, добавляя

 ul {
  width: 100%;
  display: table;
  table-layout: fixed; /* optional */
}

ul li {
  display: table-cell;
  width: auto;
  text-align: center;
}

Но это не сработало. Моя функция javascript работает, я не знаю, почему в jsfiddle она не работает. Как я могу решить эту проблему?

Спасибо!!

Ответ №1:

используйте flexbox. Дочерние элементы будут заполнять доступную область по умолчанию.

http://jsfiddle.net/4XR5V/3/

 #tabs_header ul {
    display: flexbox;
}

#tabs_header li {
    flex: 1 1 auto;
}

Ответ №2:

Удалить float: left . Это объявление не требуется, когда элементы отображаются как table-cell . Плавающие элементы сжимают свое содержимое.

Комментарии:

1. Да, и я также удалил высоту: 19 пикселей; и положение: относительное; в #tabs_header li { …

2. Это хорошо. position: relative , само по себе, полезно, когда вам нужно расположить что-то абсолютно внутри относительно позиционированного элемента. И, вы устанавливаете высоту через отступы, поэтому height это излишне.

Ответ №3:

Удалить float: left; из элементов списка:

 #tabs_header li {
    float: left;
}

fiddle1, fiddle2 — рабочий скрипт (с использованием jQuery)