响应选择下拉框中

Question

HTML：

<select id="location" name="city"> 
    <option selected="selected" value="Los Angeles">Los Angeles</option> 
    <option value="Houston">Houston</option> 
    <option value="New York">New York</option> 
</select> 

CSS：

select{ 
    width: 100%; 
    max-width: 600px !important; 
} 

的选择框没有覆盖的div 100％。如果我将最大宽度更改为最小宽度，它将起作用。但是，当我缩小浏览器窗口时，该框将不会相应地缩小并伸出div。任何建议？

Answer 1

如果您正在进行自适应设计，使用@media查询最容易。您可以根据浏览器的大小更改CSS。我在下面写的可能不是你想要的，但它是一个很好的起点。

@media all and (max-width: 600px){ 
    select { 
    width: 100%; max-width: 100%; 
    } 
} 

因此，代码基本上说：

When the badness will happen in the browser 
    Adjust the code accordingly 

有基于设备的，最小宽度等其他@media查询但是，这是你开始和它的奶油面包响应式设计。