CSS-自动调整div的宽度
4缺乏
我有一个下拉菜单栏，其中有很多可供选择的选项。我希望它们是内联的，但也希望它们是可缩放的，以便它们占据div的整个宽度（但每行还允许多个选项）。这是到目前为止我所拥有的照片：
这是我拥有的html：
<h2>FILTERs</h2>
<span>Search:</span>
<input id="searchBox" type="text"></input>
<div id="conts" class="filter">
<div class="label">
<span>Option:</span>
</div>
<div class="content">
<div class="selector">Di1</div>
<div class="selector">Di 12</div>
<div class="selector">D 15</div>
<div class="selector">Div1</div>
<div class="selector">v1234</div>
<div class="selector">Di 3</div>
<div class="selector">D 12</div>
<div class="selector">v 1234</div>
<div class="selector">Di</div>
<div class="selector">D 123</div>
</div>
</div>
和CSS：
.filter .content{
max-width: 96px;
max-height: 0px;
margin: 0px 12px 0px 4px;
background-color: #808080;
overflow: hidden;
}
#vertnav .filter:hover .content{
max-height: 256px;
}
.content .selector{
background-color: #369;
padding: 8px 4px;
display: inline-block;
text-align: center;
cursor: pointer;
box-sizing: border-box;
transition: .1s !important;
}
.content .selector:hover{
background-color: white;
color: #369;
}
最终目标是，<div>同一行上的每个行将自动填充其所在行的宽度，而不会将其他<div>行推到新行上（又名，display: block;例如不使用）。
我愿意使用JS或jQuery，但更愿意仅为此使用html和css。
谢谢你。
约翰尼斯
这是使用flexbox的典型情况：
将容器定义为flex-container并进行以下设置：
content {
display: flex;
flex-wrap: wrap;
}
（第一个设置将以行为单位进行平均分配，第二个设置将弹性项目（子元素）放入多行中）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS：自动调整宽度以包装文本内容？
- 2
如何使用CSS固定宽度和自动调整大小来设置div的样式？
- 3
CSS div自动调整大小到内容，带有最大宽度和省略号文本
- 4
如何使用CSS固定宽度和自动调整大小来设置div的样式？
- 5
使用CSS在div中自动调整图像大小仅适用于宽度，不适用于高度
- 6
CSS div液体状/自动调整尺寸
- 7
HTML / CSS-自动调整包装器中内容的宽度
- 8
CSS div类无法调整为最大宽度
- 9
如何使用CSS调整每个高度的DIV宽度
- 10
自动调整div的最大宽度
- 11
自动调整div的最大宽度
- 12
两个div的CSS Div静态和自动宽度
- 13
CSS Div的两个div的静态和自动宽度
- 14
CSS过渡自动宽度
- 15
自动调整大小的 css
- 16
CSS窗口宽度调整问题
- 17
CSS Grid不会因自动调整而中断，并在<p>中添加最小宽度后导致爆裂
- 18
CSS-将Div宽度设置为100％，并调整尺寸以保持长宽比
- 19
调整div宽度的大小以自动适应段落的宽度
- 20
CSS Backround自动调整问题
- 21
CSS调整宽度取决于元素
- 22
移动CSS调整窗口，而不是超出宽度
- 23
较小div内的表格的HTML / CSS自动宽度，可见溢出
- 24
CSS3内容和包装div不会自动调整大小
- 25
css div宽度根据图像宽度
- 26
根据主动态宽度动态调整CSS中的宽度
- 27
根据主动态宽度动态调整CSS中的宽度
- 28
CSS div高度未调整
- 29
div宽度如何自动调整内部图像/内容？
我来说两句