How to control the width of select tag?

后端 未结 3 1538
长发绾君心
长发绾君心 2020-12-05 22:58

I have a list of countries, some with a very long name:


                        
    
提交评论

  • 2020-12-05 23:26

    USE style="max-width:90%;"

    <select name=countries  style="max-width:90%;">
     <option value=af>Afghanistan</option>
     <option value=ax>Åland Islands</option>
     ...
     <option value=gs>South Georgia and the South Sandwich Islands</option>
     ...
    </select>  
    

    LIVE DEMO

    0 讨论(0)
  • 2020-12-05 23:31

    You've simply got it backwards. Specifying a minimum width would make the select menu always be at least that width, so it will continue expanding to 90% no matter what the window size is, also being at least the size of its longest option.

    You need to use max-width instead. This way, it will let the select menu expand to its longest option, but if that expands past your set maximum of 90% width, crunch it down to that width.

    0 讨论(0)
  • 提交回复
    热议问题