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;
}

选择框未覆盖100％的div。如果我将max-width更改为min-width，它会起作用。但是，当我缩小浏览器窗口时，该框不会相应缩小并延伸到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查询基于设备，最小宽度等。但这是你开始的地方，它是响应式设计的基础。

响应式选择下拉框

1 个答案: