Сделать ширина входного тега без

Question

яваскрипта Рассмотрим следующий фрагмент HTML:

<input><ul> 

Мы имеем входной тег, а затем список. (Список будет иметь фактические элементы, но чтобы сохранить компактность, я оставил их здесь.) Теперь можно управлять шириной списка с помощью CSS, а также для входного тега.

Я хочу оставить тег ввода по умолчанию, а затем сделать ширину списка соответствующей ширины. Я мог бы, конечно, использовать getComputedStyle для JavaScript. Теоретически это вызовет проблемы, если пользователь отключит JavaScript, но на практике я фактически кодирую (очень минималистичный) виджет автозаполнения (например, в Википедии, но менее причудливый), поэтому он не будет работать без JavaScript в любом случае.

Но все же: это возможно? Я ничего не знаю о CSS, так что простите меня, если это будет очевидно.

Answer 1

Обычно, вы могли бы сделать это с оберточной элементом, установленным в display:table или display:table-cell (это не имеет значения, анонимный объект будет создан для другой) вместе с очень малая указанная ширина. Используемая ширина обертки будет вынуждена быть по крайней мере такой же широкой, как и поле ввода, а затем список будет соответствовать этому.

(Демонстрационная CSS и HTML разметки заимствованы из ответа Джозефа Marikle в)

.wrapper { 
 
    display: table; 
 
    width:1px; 
 
} 
 

 
/* for demo only */ 
 
ul{list-style-type:none;padding:0;margin:0;background:#ae0}.wrapper{margin-bottom:1em;}

<div class="wrapper"> 
 
    <input> 
 
    <ul> 
 
    <li>test 1</li> 
 
    <li>test 2</li> 
 
    <li>test 3</li> 
 
    </ul> 
 
</div> 
 
<br> 
 
<div class="wrapper"> 
 
    <input> 
 
    <ul> 
 
    <li>test 1</li> 
 
    <li>test 2 tetts 3 stsdgsdf stsdgsdf</li> 
 
    <li>test 3</li> 
 
    </ul> 
 
</div>

Answer 2

попробовать

<ul style = "width: 40px"> // изменение 40px шириной соответствия

Answer 3

Если вы не слишком прочь использовать новые стандарты CSS, я предлагаю использовать Flexbox. Он адаптирует оба способа, гарантируя, что оба элемента имеют одинаковую ширину, без необходимости устанавливать или вычислять явные значения.

.wrapper { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
} 
 

 
/* for demo only */ 
 
ul{list-style-type:none;padding:0;margin:0;background:#ae0}.wrapper{margin-bottom:1em;}

<div class="wrapper"> 
 
    <input> 
 
    <ul> 
 
    <li>test 1</li> 
 
    <li>test 2</li> 
 
    <li>test 3</li> 
 
    </ul> 
 
</div> 
 
<br> 
 
<div class="wrapper"> 
 
    <input> 
 
    <ul> 
 
    <li>test 1</li> 
 
    <li>test 2 tetts 3 stsdgsdf stsdgsdf</li> 
 
    <li>test 3</li> 
 
    </ul> 
 
</div>