Сделать соседние элементы одного уровня одинаковой ширины, используя только CSS

Заранее извиняюсь, потому что я не могу показать код/изображения того, над чем я работаю, из соображений конфиденциальности, однако я думаю, что могу объяснить это довольно просто.

У меня есть элемент <h1>, который действует как заголовок моей веб-страницы — этот заголовок может меняться по длине в зависимости от заголовка конкретной страницы, на которой находится пользователь, поэтому он может говорить «Домашняя страница» или может говорить «Сохраненные проекты» и т. д. , Длина варьируется.

У <h1> есть родственный элемент, <ul>, который действует как раскрывающийся список для перехода к этим другим страницам.

Моя цель — сделать так, чтобы размер выпадающего списка всегда был таким же, как <h1>. В настоящее время ширина указана явно, я пробовал «авто», что, естественно, не сработало, и сейчас я ищу другие обходные пути, но я решил, что тем временем могу опубликовать здесь.

Я использую LESS, поэтому я знаю, что переменные большие, и это может быть вопрос передачи переменной в качестве значения ширины раскрывающегося списка, однако я не знаю, могут ли эти переменные быть динамическими в зависимости от длины <h1>. Я новичок в МЕНЬШЕ.

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

Спасибо за любую помощь!


html css less width siblings
person alex.mo.07    schedule 06.08.2014    source источник
comment
В самом деле? вы не можете показать несколько <li> или <a> с текстом-заполнителем? Вам не нужно публиковать <li>cure for cancer here, don't steal</li>.   -  person Marc B    schedule 06.08.2014
comment
Не совсем возможно с CSS. CSS не может определить ширину и применить ее к родственному элементу. Если бы второй элемент был абсолютно позиционированным дочерним элементом... это можно было бы сделать. Лично я бы выбрал JS/Jq.   -  person Paulie_D    schedule 06.08.2014
comment
Это было моей заботой, пытаясь понять, смогу ли я избежать JS. Ну что ж. Спасибо @Paulie_D   -  person alex.mo.07    schedule 06.08.2014

Ответы (1)


arrow_upward
3
arrow_downward

Попробовал сделать демо по вашему описанию (без раскрытия лекарства от рака). Не уверен, правильно ли я вас понял, но это то, что вам нужно? http://jsbin.com/hekimije/1/edit (jsFiddle не работает :-()

Если да, то позвольте мне объяснить, так как на самом деле это довольно просто:

  • add a wrapper around your h1 and ul
    • float it left to make it take the width of its content
    • дайте ему относительное положение, чтобы вы могли использовать его для позиционирования вашего ul против
  • position the ul absolute
    • give it a left and right of 0 to make it take the same width as its parent
    • дайте ему верх 100%, чтобы начать с нижнего края его родителя

Этот метод выводит ваш ul из потока документов, но для раскрывающегося списка это обычно желательно, поэтому это не должно быть проблемой.

И полный код:

HTML

  <div id='title-wrapper'>
    <h1>Some title</h1>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul> 
  </div>

Меньше

#title-wrapper {
  float: left; 
  position: relative;

  ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0; 
  }
}

Весь остальной код в jsBin предназначен только для того, чтобы сделать что-то более заметным. Вы можете изменить длину заголовка, и вы заметите, что за ним следует ul. Очевидно, что вам нужно навести курсор на заголовок, чтобы увидеть ul, в конце концов, это раскрывающийся список...

person Pevara    schedule 06.08.2014