使用CSS填充整行LI
使用CSS填充整行LI
提问于 2013-12-15 05:05:15
我有这些嵌套的ul和li。当我填充背景色时，嵌套的li会留下白色的缩进部分。我有许多这样的li，它们是从数据库中填充的，所以我不能给li中的单个文本留出空白量。我怎么做才能让背景和缩进一起填满整行？
现在看起来像是这个
我想要这样的
有什么建议可以做到这一点？提前谢谢。我不能更改html标记，因为我必须更改很多代码。有没有办法使用这个标记来做到这一点。这些li来自db query，所以我不知道在这种情况下li的确切数量。
回答 18
Stack Overflow用户
回答已采纳
发布于 2014-01-03 17:18:31
最好的做法是使用一种便于数据库管理、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;
}我不知道如果不包含li的ul是有效的，还是invalid.If是无效的，那么您可以使用：
<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>Stack Overflow用户
发布于 2013-12-15 05:09:04
默认情况下，<ul>使用padding-left来容纳项目符号。
如果将此代码添加到CSS中：
ul {padding-left:0}
ul>li {padding-left:40px}你应该会得到你想要的效果。
编辑:您还需要更正您的超文本标记语言:p <ul>只能将<li>作为子对象。
Stack Overflow用户
发布于 2013-12-30 02:35:34
灵活的多级嵌套解决方案
这与我回答here的另一个问题非常相似，我在下面为您编写了一个类似的解决方案。您需要将所有嵌套的li元素都放在它们自己的ul中(就像其他人在这里提到的那样)，并且最好是通过最外层的ul上的某个类来控制所有这些(虽然这不是必需的，但这会使针对该列表的操作变得容易得多)。
这里的关键是通过:before伪元素提供background，该伪元素跨越最外层ul的整个宽度。
HTML
<ul class="full-width-list">
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>B</li>
</ul>
</li>
</ul>
</li>
</ul>CSS
.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元素都不能具有设置在其上的默认static以外的代码，因为:before元素的li伪元素必须具有其唯一定位的父级，即代码element. - There必须是<
.full-width-list>D26static>项上的一个集合。在我的示例中，我使用了1.2em，但是无论您设置了什么height，这都意味着li元素不能转到两行或更多行文本(因此此解决方案仅适用于单行文本)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20588266
复制相关文章
相似问题