Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

html - Cách khớp độ rộng động của ul khi phần tử css ul li vượt quá ul

In lại Tác giả: Walker 123 更新时间：2023-11-28 03:37:01 35 4
mua khóa gpt4 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 的所有组合，当我 nổi: trái ul 或 li 中的任何内容时，这会破坏 View 较小的文本 ul 输出，或较长的文本 ul 输出，或两者同时输出。

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

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

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


  • dynamic li item would be here; nothing crazy



.sidebar ul {
    vị trí: tương đối;
    max-height:55vh;
    min-height:10em;
    lề:0;
    chiều rộng: 100%;
}
.node-list{
    khoảng trắng:nowwrap;
    đệm-đáy: 2em;
}
.node-list li{
    padding: .15em .5em .15em .35em;
    lề:0;
    border-left: solid 2px transparent;
    chiều rộng tối đa: 100%;
    width:auto;
}
.node-list li a{
    color: rgb(73,73,73);
    độ dày phông chữ: đậm;
    trang trí văn bản: không có;
}
.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)
}

câu trả lời hay nhất

Sẽ sidebar ul đặt thành display: inline-block và sẽ chiều rộng: 100% Thay đổi thành min-width: 100%

Updated fiddle

堆栈片段

.sidebar ul {
  vị trí: tương đối;
  max-height: 55vh;
  min-height: 10em;
  lề: 0;
  min-width: 100%; /* changed property */
  display: inline-block; /* added property */
}

.node-list {
  khoảng trắng: nowrap;
  đệm-đáy: 2em;
}

.node-list li {
  padding: .15em .5em .15em .35em;
  lề: 0;
  border-left: solid 2px transparent;
  chiều rộng tối đa: 100%;
  chiều rộng: tự động;
}

.node-list li a {
  color: rgb(73, 73, 73);
  độ dày phông chữ: đậm;
  trang trí văn bản: không có;
}

.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)
}

  

        
  • Lorem

    •     
  • 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

    •     
  • Lorem

    •     
  • 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

    •     
  • Lorem

    •     
  • Two of the nation's top intelligence officials repeatedly refused to say Wednesday whether President 

    •

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

35 4 0
Đề xuất bài viết: C++ MFC 从 CLSID (GUID) 创建 IShellItem
Đề xuất bài viết: javascript - 如何使用单选按钮在 vue 上选择图像？
Đề xuất bài viết: c++ - C++ xerces 对象的序列化导致访问冲突。
Đề xuất bài viết: javascript - 如何用foreach时间制作图表
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress