Question

我有这些嵌套的ul和li。当我填充背景颜色时，嵌套的li会将缩进的部分留白。我有一些像这样的li从数据库中填充，所以我不能给li中的单个文本留下余量。我怎么能这样做，以便背景填补整行与缩进？

现在看起来像这样

enter image description here

我想要这样

enter image description here

有什么建议怎么做？提前致谢。我无法更改html标记，因为我将不得不更改大量代码。有没有办法使用此标记执行此操作。这些li来自db查询，所以在这种情况下我没有确切的li数。

演示http://jsbin.com/uReBEVe/1/

Answer 1

默认情况下，<ul>有padding-left来容纳项目符号点。

如果将其添加到CSS中：

ul {padding-left:0}
ul>li {padding-left:40px}

你应该得到你想要的效果。

编辑：您还需要更正HTML：p <ul>只能<li>作为孩子。

Answer 2

灵活的多级嵌套解决方案

这与我回答here的另一个问题非常相似，我在下面为您撰写了类似的解决方案。你可以通过在他们自己的li中包含所有嵌套的ul元素来获得有效的html（正如其他人在这里注意到的那样），并且最好通过最外面的{{1}上的某个类来控制所有这些。（虽然这不是必需的，但是使这个列表更容易定位）。

此处的关键是通过ul伪元素提供background，该元素跨越最外层:before的整个宽度。

Here is my demo jsbin.

<强> HTML

ul

<强> CSS

  <ul class="full-width-list">
    <li>A</li>
    <li>
      <ul>
        <li>B</li>
        <li>
          <ul>
            <li>B</li>
          </ul>
        </li>  
      </ul>
    </li>
  </ul>

限制

此解决方案有两个主要限制：

.full-width-list { position: relative; padding: 0 0 0 4px; } .full-width-list ul { margin: 0; padding: 0 } .full-width-list li { list-style:none; padding: 0; margin: 0; height: 1.2em; line-height: 1.2em; } .full-width-list ul > li { margin-top: 4px; padding: 0 0 0 36px; } .full-width-list li:first-child:before { content: ''; height: 1.2em; position: absolute; left: 0; right: 0; z-index: -1; background:red; } .full-width-list li:first-child:hover:before { background:green }或ul元素中没有一个元素可以设置li以外的默认position，作为static的伪元素:before元素需要将其唯一定位的父元素设为li元素。
.full-width-list项上必须有一组height。在我的示例中，我使用li，但无论您设置的1.2em是什么，都意味着height元素不能转到两行或更多行文本（因此此解决方案仅适用于一行文本）。

Answer 3

最好的办法是使用一种结构，使数据库管理， html 和样式（CSS）变得容易。

<强> HTML：

<body>
<ul class="main">
    <li>1.</li>
    <li><ul>2</ul></li>
    <li><ul><li><ul>3.</ul></li></ul></li>
</ul>
</body>

<强> CSS：

.main{
    position:relative;
    right:40px;
}
li{
    list-style:none;
    background:red;
    margin-top:1px;
}

Fiddle 1.

我不知道ul不包含li是否有效或无效。如果它无效，那么您可以使用：

<body>
<ul class="main">
    <li>1.</li>
    <li><ul><li>2</li></ul></li>
    <li><ul><li><ul><li>3.</li></ul></li></ul></li>
</ul>
</body>

Fiddle 2

Answer 4

您可以使用:before hack执行此操作，因为您无法访问代码

<强> Working jsBin Demo

<强> CSS

li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute; left:0; z-index: -1;}

Answer 5

这适用于任意深度，没有黑客或无意义。

在这个帖子中说“不能”和“不可能”的人真的需要了解这些单词对CSS的意义（一般来说，“还没弄清楚怎么样。”）:)

这个想法很简单：设置一个：选择器，它通过绝对定位适合左右边缘并绘制背景颜色。你需要设置一个z-index：把它放在它的内容后面，一个内容：'\ 0020'强制它画（这是一个不间断的空间），你很好。

你可以通过在一个位置设置它来绑定它：相对容器。

<!doctype html>
<html>

  <head>

    <style>

      li { 
          list-style-type : none; 
          margin-bottom   : 0.25em;
      }

      li:before { 
          position         : absolute; 
          left             : 0;
          right            : 0;
          background-color : #eef;
          content          : "\00a0";
          z-index          : -1;
      }

    </style>

  </head>

  <body>

    <ul>
      <li>Test</li>
      <li><ul>
        <li>Test</li>
        <li><ul>
          <li>Test</li>
        </ul></li>
      </ul></li>
    </ul>

  </body>

</html>

Answer 6

您的标记已损坏，您应该将li嵌套在一个ul中，如下所示：

<ul>
   <li>Text</li>
   <li>Text 1</li>
</ul>

这是你的标记

<ul>
  <li>A</li>
  <ul>
    <li>B</li>
    <ul>
      <li>B</li>
    </ul>
  </ul>
<ul>

我认为你明白为什么这是错误的。

我为你修复了JSBin，它的效果正确。

编辑：您当然可以通过使用javascript循环遍历所有padding-left来添加li。

Answer 7

在标记清理和一致性之前，您无法确定浏览器的一致性，但这很可悲。上面的所有建议看起来都不错，从我的实际观点来看，有一些替代方案。

标记：

  <ul>
    <li>A</li>
    <li><p>B</li>
    <li><p><p>B</li>
    <li><p><p><p>B</li>
    ....
  </ul>

和CSS：

li p {
  padding-left: 1em;
  display: inline;
}

JSbin

p标记在HTML子集中是可选的，无论如何，无论如何都应该在每个浏览器中都有效。如果您使用xHTML并担心验证，则选项可能使用结束标记，如：

  <ul>
    <li>A</li>
    <li><p></p>B</li>
    <li><p></p><p></p>B</li>
    ....
  </ul>

Answer 8

您可以在代码中添加此CSS以获得所需的结果：

li {
    list-style: none;
    background: red;
    margin-top: 4px;
}
ul {
    padding: initial !important;
}

ul ul li {
    padding-left: 40px;
}
ul ul ul li {
    padding-left: 80px;
}
li:hover {
    background: green;
}

jsbin的结果在这里：http://jsbin.com/uReBEVe/33/edit

Answer 9

这是您应该遵循的正确HTML结构，每个UL元素都有两个LI元素。一个用于每行的值，另一个用作下一个缩进值的父级。

<ul>
    <li>A</li>
    <li>
        <ul>
          <li>B</li>
          <li>
              <ul>
                <li>C</li>
              </ul>
          </li>
        </ul>
     <li>  
</ul>

对于CSS，此解决方案要求您拥有最大数量的＆＃39;级别＆＃39;在列表层次结构中（参见代码注释）

li {
    list-style:none;
    padding-left:0px;
    box-sizing:border-box;
}

ul {
    padding-left:0
}

ul > li:nth-of-type(1):hover {
    background:green
}

ul li:nth-of-type(1) {
    padding-left:50px;
    background:red;
    margin-top:4px
}

ul li li:nth-of-type(1) {
    padding-left:100px;
}

ul li li li:nth-of-type(1) {
    padding-left:150px;
}

/* 
   Continue incrementing the padding for the li 
   children for however many levels you want
*/

请注意，IE8及以下版本的所有浏览器均支持 nth-of-type 选择器。

请参阅JSBin以获取工作示例：http://jsbin.com/uReBEVe/51

祝你好运！

Answer 10

我将给你一个正确的想法如何对HTML内容应用css规则。我创建的css规则只是复制它并看到答案。它是我使用的子组合器！我检查整个不同用户提供的答案完全没有遵循css规则。请告诉我！希望得到答案！

<!DOCTYPE html>
<html>
<head>
<title>Test</title>

<style type="text/css">
li{
  list-style:none;
  background:red;
  margin-top:4px;

}
body>ul>ul>li{
  margin: 4px 0 0 -40px;
  }
body>ul>ul>ul>li{
  margin: 4px 0 0 -80px;
  }
body>ul>ul>li {
   padding:0px 0px 0px 40px;
}
body>ul>ul>ul>li{
  padding:0px 0px 0px 80px;
}
li:hover{
        background:green;
        }
</style>
</head>
<body>
  <ul>
    <li>A</li>
    <li>
      <ul>
      <li>B</li>
      <li>
        <ul>
            <li>C</li>
        </ul>
      </li>
      </ul>
    </li>
  </ul>
</body>
</html>

首先将图像保存到本地驱动器，或将此图像拖放到新标签页浏览器中以查看更多内容。

enter image description here

Answer 11

UL和OL都继承了边距。你的修复方法是将保证金归零：

ul, ol    
{   
   margin:0;
}

Answer 12

如果它只是背景颜色的问题，你可以使用相同颜色的阴影。 http://codepen.io/gc-nomade/pen/fxBAl（修复了html结构）

<ul class="ulparent">
  <li>
    <p>A</p>
    <ul>
      <li>
        <p>B</p>
        <ul>
          <li>
            <p>B</p></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

.ulparent {overflow:hidden;}
li p {background:green;box-shadow:-200px 0 0 green;/* -200px for instance or whatever suits your need */margin:4px 0;}
li p:hover {background:red;box-shadow:-200px 0 0 red;}

否则，如果它是背景图像，我会使用伪元素和background-attachment:fixed;（包含在codepen中的演示，使用线性渐变作为图像）

Answer 13

1）您的HTML无效（<li>周围缺少<ul>）

2）使缩进按预期工作的唯一方法是每个级别的CSS规则。

ul ul li.line { padding-left: 20px !important }
ul ul ul li.line { padding-left: 40px !important; }
...

http://jsbin.com/uReBEVe/12/edit

Answer 14

一个非常非常繁琐的jsfiddle，但它可以在jQuery的正确方向上轻微推动。不是一个伟大的决心，而是一个决心。

<强> HTML

<ul>
    <li>A</li>
        <ul>
            <li>B</li>
                <ul>
                    <li>B</li>
               </ul>
        </ul>
</ul>

<强> CSS

ul {
    list-style-type:none;
    margin-top:5px;
    padding-left:40px;
    float:left;
    width:400px;
    overflow:hidden;
    background:#ff0000;
}
li {
    padding-top:5px;
}
ul div {
    position:absolute;
    left:0;
    width:100%;
    border-top:3px solid #fff;
}

<强>的jQuery

$(document).ready(function(){
    $('ul').prepend('<div></div>');
});

jsFiddle here。希望这适合你！

Answer 15

@AsrafulHaque有正确的想法，使用填充来扩展背景宽度而不改变嵌套缩进。

但是，因为你不知道有多少＆lt;李＆GT;会有，你不能指望这是一个纯CSS解决方案。

你试图做一个非常尴尬的事情，但它将可以循环它们并使用javascript / jquery或其他东西注入动态填充：

i = 40;
$('img.yourImageClass').each(function() {
    $(this).css('padding-left', i+'px');
    i = i + 40;
});

我确信你也可以在服务器端进行预处理这种类型的注入，但绝对不能单独使用CSS。您需要一个动态解决方案（即使用变量的能力）来支持您的动态输出。

Answer 16

试试这个：

<ul class="lvl1">
  <li>A</li>
  <ul class="lvl2"><li>B</li>
   <ul class="lvl3"><li>B</li></ul>
    </ul>
</ul>

li {
  background: none repeat scroll 0 0 #FF0000;
  list-style: none outside none;
  margin-top: 4px;
}
ul { padding:0px;}
ul.lvl1>li {padding-left:30px;}
ul.lvl2>li {padding-left:60px;}
ul.lvl3>li {padding-left:90px;}

见这里：http://jsfiddle.net/x5K4a/

Answer 17

你可以这样做

HTML

 <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <ul class="mainUL">
  <li>A</li>
  <ul><li>B</li>
   <ul><li>C</li></ul>
    </ul>
  </ul>
</body>
</html>

CSS代码

li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute;left:0; z-index: -1;color:red;}
.mainUL {padding-left: 0px;}

您可以看到工作演示：http://jsbin.com/uReBEVe/71/edit

Answer 18

来自您的演示：

如果你申请

ul{ padding:0; margin:0; }

一切都像你想要的那样与墙壁齐平。

如果你想要文字缩进

ul ul li{ text-ident:20px; }

正在筑巢。只会针对那些嵌套在ul中的ul的目标。那么你想要的是什么，你不需要改变你的代码

您还可以继续嵌套代码

根据结构的深度添加更多的ul和li，但这应该会给你一个非常好的基础

使用CSS填充LI的整行

18 个答案:

灵活的多级嵌套解决方案

限制