我想从ul中删除所有缩进。我试着把边距、填充、文本缩进设置为0,但没有用。似乎将文本缩进设置为负数是可行的——但这真的是消除缩进的唯一方法吗?
当前回答
现场演示:https://jsfiddle.net/h8uxmoj4/
ol, ul {
padding-left: 0;
}
li {
list-style: none;
padding-left: 1.25rem;
position: relative;
}
li::before {
left: 0;
position: absolute;
}
ol {
counter-reset: counter;
}
ol li::before {
content: counter(counter) ".";
counter-increment: counter;
}
ul li::before {
content: "●";
}
由于最初的问题要求不明确,我试图在其他答案的指导方针中解决这个问题。特别是:
将列表项目符号与段落外文本对齐 将同一列表项中的多行对齐
我还想要一个解决方案,不依赖于浏览器同意使用多少填充。为了完整起见,我添加了一个有序列表。
其他回答
现场演示:https://jsfiddle.net/h8uxmoj4/
ol, ul {
padding-left: 0;
}
li {
list-style: none;
padding-left: 1.25rem;
position: relative;
}
li::before {
left: 0;
position: absolute;
}
ol {
counter-reset: counter;
}
ol li::before {
content: counter(counter) ".";
counter-increment: counter;
}
ul li::before {
content: "●";
}
由于最初的问题要求不明确,我试图在其他答案的指导方针中解决这个问题。特别是:
将列表项目符号与段落外文本对齐 将同一列表项中的多行对齐
我还想要一个解决方案,不依赖于浏览器同意使用多少填充。为了完整起见,我添加了一个有序列表。
这样做内联,我设置margin为0 (ul style="margin:0px")。项目符号与段落对齐,没有突出。
你能提供一个链接吗? 谢谢 我可以看看 很可能你的css选择器不够强大,或者你可以试试
填充:0 !重要;
我首选的解决方案,以删除<ul>缩进是一个简单的CSS一行:
Ul {padding-left: 1.2em;} <p>段落文本的开头行</p> < ul > <li> .</li> . <li>长列表项正确换行。很长的列表项正确地环绕起来。很长的列表项正确地环绕起来。很长的列表项正确地环绕起来。很长的列表项正确地环绕起来。李< / > <li>列表项3</li> . txt < / ul > <p>段落文本的尾行</p>
这个解决方案不仅是轻量级的,而且有很多优点:
它很好地将<ul>的项目符号左对齐到周围的正常段落文本(=删除<ul>的缩进)。 <li>元素中的文本块如果换行成多行,则会保持正确的缩进。
遗留的信息: 对于IE版本8及以下,你必须使用margin-left代替:
ul { margin-left: 1.2em; }
设置列表样式和左填充为空。
ul {
list-style: none;
padding-left: 0;
}
申{ list-style:郎; padding-left: 0; 的 <德> < li > a < / li > < li > b < / li > < li > c < / li > < /德>
为了保持项目符号,你可以将list-style: none替换为list-style-position: inside或简写list-style: inside:
ul {
list-style-position: inside;
padding-left: 0;
}
申{ list-style-position:内心; padding-left: 0; 的 <德> < li > a < / li > < li > b < / li > < li > c < / li > < /德>
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?