我想构建一个有一些限制的 CSS 菜单：
- 父级的高度和宽度
<div>未知
- 的数量
<li>未知
-
<ul>必须不小于<div> width
- 一排
<li>必须包含尽可能多的<li>尽可能与max-width of <ul>
我想要的是：
问题是：实际上<ul>过于尊重初始宽度并且不会扩展。如果您单击“运行代码片段”，您将看到它。
HTML 可以更改；欢迎使用灵活性和技巧；不欢迎JS；需要IE10支持。
div {
background: yellow;
display: inline-block;
padding: 20px 30px;
position: relative;
}
ul {
background: lightblue;
left: 0;
margin: 0;
max-width: 450px;
min-width: 100%;
padding: 0;
position: absolute;
top: 100%;
}
li {
background: orange;
display: inline-block;
margin: 2px;
padding: 20px 25px;
}
<div>Stabat mater dolorosa
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
这是您的方法的问题：
- The
ul是 的孩子div.
- The
ul绝对位于div，因为div是最近的定位祖先（position: relative)
- 结果，
ul不能延伸超过宽度div，设置为inline-block.
- So the
li项目必须根据宽度进行换行div和max-width被忽略。
我建议你尝试不同的方法。
使用纯 CSS 和 HTMLtable元素您的所有要求都可以得到满足。
tr:first-child td span {
display: inline-block;
padding: 20px 30px;
background: yellow;
}
tr:last-child td {
max-width: 450px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
background-color: lightblue;
}
li {
background: orange;
display: inline-block;
margin: 2px;
padding: 20px 25px;
}
<table>
<tr>
<td><span>Stabat mater dolorosa</span></td>
</tr>
<tr>
<td>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</td>
</tr>
</table>
jsFiddle https://jsfiddle.net/uhe37sqL/1/
- 父级的高度和宽度
<div>未知没问题
- 的数量
<li>未知没问题
-
<ul>必须不小于<div> width YES
- 一排
<li>必须包含尽可能多的<li>尽可能与max-width of <ul> YES
- 没有 JavaScriptYES
- IE10支持YES
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
