Select的宽度与表格中的max-width不对应
Select的宽度与表格中的max-width不对应
提问于 2020-08-28 19:49:36
我有一个#wrapper div，max-width:50%，然后里面有一个表和一个select，max-width:100%。
但尽管如此，选择范围仍然太广，例如：https://jsfiddle.net/gLqecmhu/11/为什么要这样做，我该如何做？我想让它对移动设备更友好。
代码：
<style>
#wrapper {
max-width: 50%;
}
table {
max-width: 100%;
}
select {
max-width: 100%;
}
</style>
<div id = 'wrapper'>
<table>
<tr>
<td>
<select>
<option>Very long option Very long option Very long option Very long option Very long option</option>
</select>
</td>
</tr>
</table>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-28 19:53:55
一个Codepen，用来展示max-width对不同大小元素的影响。
将width: 100%;添加到每个规则中，然后它就可以工作了。但是，我建议您在某些时候使用@media查询，因为包装器将始终保持屏幕大小的一半。
#wrapper {
max-width: 50%;
width: 100%;
}
table {
max-width: 100%;
width: 100%;
}
select {
max-width: 100%;
width: 100%;
}<div id = 'wrapper'>
<table>
<tr>
<td>
<select>
<option>Very long option Very long option Very long option Very long option Very long option</option>
</select>
</td>
</tr>
</table>
</div>
您还可以删除table的规则，因为它的宽度是由其内容定义的。例如。
#wrapper {
max-width: 50%;
width: 100%;
}
select {
max-width: 100%;
width: 100%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63633232
复制相关文章
相似问题
腾讯云开发者
