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

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

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

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

Можно ли это сделать без javascript и только с помощью css?


html css width spacing
person Doug Fir    schedule 11.01.2012    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Да, это. Технически 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;
}

Обновлять

В вашем конкретном примере (опубликованном в комментариях) проблема заключается в том, что вы установили значение position ul li ul на 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;
}
person 0b10011    schedule 11.01.2012
comment
спасибо, но я пробовал это. Что произошло, так это то, что элементы списка выпадающего меню стали слишком широкими, растянувшимися в крайнюю правую часть экрана. Возможно, это потому, что они настроены на отображение в виде блока? - person Doug Fir; 12.01.2012
comment
Мне нужно было бы увидеть больше вашего кода, чтобы лучше ответить на этот вопрос. Во-первых, сузьте его до минимального объема кода (например, избавьтесь от верхних и нижних колонтитулов и всего остального, что не является частью меню), а затем опубликуйте его в своем вопросе или на сайте, таком как www.jsfiddle. .сеть. Как только вы это сделаете, дайте мне знать, и я обновлю свой ответ, чтобы отразить ваши изменения. - person 0b10011; 12.01.2012
comment
Готово – jsfiddle.net/fBJ7W спасибо за отзыв и помощь. Это выпадающее меню над последним пунктом в основном списке, мелиорированной древесиной. Обратите внимание, как выпадающий список уже - person Doug Fir; 12.01.2012
comment
@DougFirr, см. раздел Обновление. Однако существует побочный эффект переноса элементов подменю. - person 0b10011; 12.01.2012
comment
большое спасибо за помощь мне здесь. Это сработало, как вы описали, но да, теперь мне нужно сделать меню sui generis таким же широким, как UL, если бы слова не переносились - есть ли простое решение для этого? - person Doug Fir; 12.01.2012
comment
@DougFirr, да, я добавил решение и для этого в самом низу своего ответа. - person 0b10011; 12.01.2012

arrow_upward
0
arrow_downward 

width:100%

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

person Robert    schedule 11.01.2012

arrow_upward
0
arrow_downward

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

ul li, ul li ul {
  width:100px;
}
person Sven Bieder    schedule 11.01.2012
comment
это приводит к тому, что выпадающее меню становится слишком широким, см. комментарий выше - возможно, из-за блока отображения? - person Doug Fir; 12.01.2012
comment
Тогда может помочь, если вы опубликуете полный код раскрывающегося списка, чтобы мы могли видеть, что на самом деле происходит. - person Sven Bieder; 12.01.2012