html - Make list the width of an input tag without javascript -


consider following snippet of html:

<input><ul> 

we have input tag, followed list. (the list have actual items, keep things compact left them out here.) now, possible control width of list using css, , likewise input tag.

i want leave input tag @ default width, , make list width have matching width. of course use javascript's getcomputedstyle. in theory, cause problems if user disables javascript, in practice, i'm coding (very minimalistic) autocomplete widget (like on wikipedia, less fancy), won't work without javascript anyway.

but still: possible? know nothing css, forgive me if supposed obvious.

normally, you'd wrapper element set display:table or display:table-cell (it doesn't matter which, anonymous object created other one) along small specified width. used width of wrapper forced @ least wide input box , list fit inside that.

(the demo css , html markup borrowed joseph marikle's answer)

.wrapper {    display: table;    width:1px;  }    /* demo */  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>


Comments

Popular posts from this blog

javascript - Thinglink image not visible until browser resize -

firebird - Error "invalid transaction handle (expecting explicit transaction start)" executing script from Delphi -

mongodb - How to keep track of users making Stripe Payments -