如何调整下拉菜单的宽度以优化用户体验？-HowtoAdjusttheWidthofaDropdownMenuforBetterUserExperience?

61  

Try this code:

试试这段代码：

Kg
Gm
Pound
Metric ton
Litre
Ounce

CSS:

CSS：

#wgtmsr{
 width:150px;   
}

If you want to change the width of the option you can do this in your css:

如果要更改选项的宽度，可以在css中执行此操作：

#wgtmsr option{
  width:150px;   
}

Maybe you have a conflict in your css rules that override the width of your select

也许你的css规则中有一个冲突，它会覆盖你选择的宽度

DEMO

DEMO

5  

try the !important argument to make sure the CSS is not conflicting with any other styles you have specified. Also using a reset.css is good before you add your own styles.

尝试使用！important参数来确保CSS与您指定的任何其他样式不冲突。在添加自己的样式之前，还可以使用reset.css。

select#wgmstr {
    max-width: 50px;
    min-width: 50px;
    width: 50px !important;
}

or

要么

							     
							                          
                           
							  

							    
#3
							    

							    

							      
4  
Create a css and set the value  in css code. Call the class of CSS in the drop down list. Then it will work.
 
创建一个css并设置值style =“width：50px;”在css代码中。在下拉列表中调用CSS类。然后它会工作。
							     
							  
                        
                           
							  

							    
#4
							    

							    

							      
3  
The dropdown-width itself cannot be set. It's width depend on the option-values. See also here ( jsfiddle.net/LgS3C/ )
 
下拉宽度本身无法设置。它的宽度取决于选项值。另见这里（jsfiddle.net/LgS3C/）
 
You can build your own control or use something like http://ivaynberg.github.com/select2/
 
您可以构建自己的控件或使用类似http://ivaynberg.github.com/select2/的内容
 
How the Select-Box looks like is depending on your browser.
 
Select-Box的外观取决于您的浏览器。
							     
							  
                        
                           
							  

							    
#5
							    

							    

							      
2  
If you want to control the width of the list that drops down, you can do it as follows.
 
如果要控制下拉列表的宽度，可以按如下方式进行操作。
 
CSS
 
CSS
 
#wgtmsr option {
    width: 50px;
}

							     
							  
                        
                           
                        
                         

        
        
    


    

        

                        
css
                        
html
                        
list
                        
pdo
                        
select
                        
io
                        
firefox
                        
version
                        
ide
                    
    



    

        
写下你的评论吧 !
        

            

                吐个槽吧,看都看了
            
            

                

                                        会员登录 | 用户注册