gpt4 book ai didi

html - 当 css ul li 元素超出 ul 时,如何匹配 ul 的动态宽度

转载 作者:行者123 更新时间:2023-11-28 03:37:01 35 4
gpt4 key购买 nike

JSFiddle 问题:https://jsfiddle.net/td6szj3o/

/我有一个 ul li,每个 li 都有标准文本项。该列表是动态的,因此有时每个内容 li 小于其所在容器的 width:100% 集,但有时 li 元素的文本会扩展到 width:100% of the容器。我不想将文本强制到下一行,而是想让长文本延伸到 ul 之后。目前,对 ul 几乎没有额外的 css 样式就可以正常工作。

showing normal ul li list with background of li per each odd numbered li item

使用此方法,我看到在 ul 下方弹出一个底部滚动条,允许我向右滚动以查看 li 的其余内容。这对我来说很好,我想保留它。

然而,我遇到了一个问题,试图在无序列表中保留非常流行且通常是大多数数据输出标准的备用 li 背景颜色。因为位于 ul 中的 li 的 css 是 width:100%,而 ul 本身停止在 width:100%,li 只延伸到ul 宽度。但问题是当文本延伸超过 li 时,它在技术上位于 ul 本身的 width:100% 之外,因此 li 上的背景颜色在 ul 宽度结束的地方停止。

the view when we have output that is longer text than normal showing where the li stops, but text extends, thus li background stops where li stops

我正在尝试找到一个适用于所有浏览器的解决方案,这将允许 ul 将 li 元素扩展到任何 li 的最长内容的整个宽度。我得到的最接近的是使用 display:table-header-group,但不幸的是,当我在 li 中有小文本内容时,它不会扩展到 width:100%

我可以简单地向 ul 添加 min-width:300px 或其他内容,这将解决我的问题。但不幸的是,当用户使用较小的设备或显示器时,这并不会减少它。当我使用 min-width:100% 时也没有解决问题。我已经使用了我能想到的 display:XXX 的所有组合,当我 float:left ul 或 li 中的任何内容时,这会破坏 View 较小的文本 ul 输出,或较长的文本 ul 输出,或两者同时输出。

如有任何帮助或指导,我们将不胜感激。我正在寻找适用于所有最新版本的 Chrome、FF、Safari 等的解决方案;并坚持使用 css 解决方案。

请注意,我故意在 CSS 中保留了自动换行。我不希望文本转到下一行,而是继续在 ul 上水平显示。

下面是我正在使用的 html/css:

<ul>
<li>dynamic li item would be here; nothing crazy</li>
</ul>

.sidebar ul {
position:relative;
max-height:55vh;
min-height:10em;
margin:0;
width:100%;
}
.node-list{
white-space:nowrap;
padding-bottom: 2em;
}
.node-list li{
padding: .15em .5em .15em .35em;
margin:0;
border-left: solid 2px transparent;
max-width:100%;
width:auto;
}
.node-list li a{
color: rgb(73,73,73);
font-weight: bold;
text-decoration: none;
}
.node-list li:nth-of-type(2n){
background-color: rgb(242,242,242)
}
.node-list li:nth-of-type(2n-1){
background-color: rgb(255,255,255)
}

最佳答案

sidebar ul 设置为 display: inline-block 并将 width: 100% 更改为 min-width: 100%

Updated fiddle

堆栈片段

.sidebar ul {
position: relative;
max-height: 55vh;
min-height: 10em;
margin: 0;
min-width: 100%; /* changed property */
display: inline-block; /* added property */
}

.node-list {
white-space: nowrap;
padding-bottom: 2em;
}

.node-list li {
padding: .15em .5em .15em .35em;
margin: 0;
border-left: solid 2px transparent;
max-width: 100%;
width: auto;
}

.node-list li a {
color: rgb(73, 73, 73);
font-weight: bold;
text-decoration: none;
}

.node-list li:nth-of-type(2n) {
background-color: rgb(242, 242, 242)
}

.node-list li:nth-of-type(2n-1) {
background-color: rgb(255, 255, 255)
}
<div class="sidebar">
<ul class="node-list">
<li>Lorem</li>
<li>Two of the nation's top intelligence officials repeatedly refused to say Wednesday whether President Donald Trump asked them to intervene in or downplay the FBI's ongoing Russia investigation, though they said they have never felt pressure to act</li>
<li>Lorem</li>
<li>Two of the nation's top intelligence officials repeatedly refused to say Wednesday whether President Donald Trump asked them to intervene in or downplay the FBI's ongoing Russia investigation, though they said they have never felt pressure to act</li>
<li>Lorem</li>
<li>Two of the nation's top intelligence officials repeatedly refused to say Wednesday whether President </li>
</ul>
</div>

关于html - 当 css ul li 元素超出 ul 时,如何匹配 ul 的动态宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44418951/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com