можно ли сделать один элемент такой же ширины, как и другой с помощью js?

Question

можно ли сделать один элемент такой же ширины, как и другой с помощью js?

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

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

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

Возможно ли это сделать без javascript и только в рамках css?

3 2

html css spacing width

3 ответа:

width:100%
Это должно сделать ребенка таким же широким, как и родитель:)

0

Попробуйте это.
ul li, ul li ul {
  width:100px;
}

0

0b10011 · Accepted Answer · 2012-01-12 00:12:24

Да, это так. Технически, 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'S position значение absolute. Это выводит его из родительского состояния (в отношении обработки width), но может быть исправлено при добавлении следующего CSS к существующему CSS:
ul li {
 position:relative;
}
ul li ul {
 width:100%;
}
Хотя это позволяет установить подменю такой же ширины, как и родительское, оно имеет побочный эффект, заключающийся в том, что элементы меню переносятся (см. меню sui generis). Чтобы преодолеть это, используйте вместо этого следующий 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;
}