UL & Li - 多列和绝对位置的动态宽度

Question

我们有以下代码：我们希望父UL具有基于LI中最长文本的最大宽度。目前有一个最大宽度限制了ul的宽度，但如果我们将其更改为100%，那么它将是整个屏幕的大小。我们需要它来适应内容，并且仍然有2列。

ul{
position: absolute;
margin-top: 18px;
font-size: 15px;
column-width: auto;
column-count: 2;
max-width: 160px;
z-index: 20;
color: rgb(109, 113, 107);
box-shadow: rgb(162, 151, 151) 3px 3px 10px;
cursor: pointer !important;
list-style: none;
background: rgb(255, 255, 255);
padding: 10px 12px;
}
ul li{
display: inline-block;
width: 100%;
padding: 2px;
}

<div id="testDiv">

<ul>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>This is very long text</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>

</ul>

</div>

Answer 1

我用display:grid替换column-width。

ul{
position: absolute;
margin-top: 18px;
font-size: 15px;
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 0 2em;
max-width : 100%;
z-index: 20;
color: rgb(109, 113, 107);
box-shadow: rgb(162, 151, 151) 3px 3px 10px;
cursor: pointer !important;
list-style: none;
background: rgb(255, 255, 255);
padding: 10px 12px;
}
ul li{
display: inline-block;
width: 100%;
padding: 2px;
}

<div id="testDiv">

<ul>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>This is very long text</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>

</ul>

</div>

Answer 2

如果删除：

• ul元素上的max-width
• li元素上的display: inline-block
• li元素上的width: 100%

我相信你会得到预期的行为。

ul{
position: absolute;
margin-top: 18px;
font-size: 15px;
column-width: auto;
column-count: 2;
z-index: 20;
color: rgb(109, 113, 107);
box-shadow: rgb(162, 151, 151) 3px 3px 10px;
cursor: pointer !important;
list-style: none;
background: rgb(255, 255, 255);
padding: 10px 12px;
/* max-width: 160px;  removes max-width */
}
ul li{
padding: 2px;
/* display: inline-block; removes max-width */
/* width: 100%; removes max-width */
}

<div id="testDiv">
<ul>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>This is very long text</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
</ul>
</div>

Answer 3

不知道这是否是您想要的确切结果，但请尝试在ul上设置width: fit-content(而不是最大宽度(，并从li中删除display: inline。