Можно ли сделать один элемент такой же ширины, как другой без нашего JS?

Question

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

Я бы хотел сделать что-то из заказа:

ul li ul {
{width: *as wide as ul li*;
}

Возможно ли сделать это без JavaScript и только внутри CSS?

Answer 1

Да, это так.Технически, ul уже такой же ширины, но, похоже, это не из-за полей и отступов.Чтобы изменить это, используйте этот CSS:

ul li ul {
 width:100%;
 margin-left:0;
 margin-right:0;
 padding-left:0;
 padding-right:0;
}

Вы также можете включить следующий CSS для изменения отступа / поля дочернего элемента li:

ul li ul > li {
 width:100%;
 margin-left:0;
 margin-right:0;
 padding-left:0;
 padding-right:0;
}

Обновление

В вашем конкретном примере (опубликованном в комментариях) проблема заключается в том, что вы установили ul li ul position значение absolute.Это исключает его из родительского (в отношении обработки width), но может быть фиксированным со следующим CSS, добавленным к вашему существующему CSS:

ul li {
 position:relative;
}
ul li ul {
 width:100%;
}

Хотя это позволяетВы должны установить подменю такой же ширины, что и родительский, это сопровождается побочным эффектом переноса элементов меню (см. sui generis menu).Чтобы преодолеть это, используйте вместо этого следующий CSS (в дополнение к jsFiddle):

ul li {
 position:relative;
}
/* Due to 'min-width', this may not be compatible with all browsers */
ul li ul {
 min-width:100%;
 white-space:nowrap;
}

Answer 2

Попробуйте это.

ul li, ul li ul {
  width:100px;
}

Answer 3

width:100%

это должно сделать ребенка таким же широким, как и родитель:)