Question

在我的有序列表中，我需要将文本缩进到40-50px左右。我尝试使用以下内容：

.shift{
    margin-left: 40px;
    padding-left: 30px;
}

<ol>
<li class="shift">

首先尝试边距，然后填充。什么都行不通。该怎么办？感谢

Answer 1

Usually在ol / ul上设置了填充或边距以抵消项目，所以这个

ol { padding:0; margin:0; }
ol > li{ margin-left: 40px; }

会给你你想要的东西。

Answer 2

使用css text-indent，它不能应用于内联元素，因此您可以将文本放在某个div或p中，然后使用text-indent作为内部块元素

例如

<ul>
    <li>
        <p style="text-indent: 10px;">text</p>
    </li>
</ul>

Answer 3

假设您的HTML类似于以下内容：

<div class="entry-content-wrapper">
  <div>
  <ol>
    <li>Test One</li>
    <li>Test Two</li>
    <li>Test Three</li>
  </ol>
    </div>    
</div>

我浏览了你提供的CSS，发现了两个声明，这些声明中的一个和/或两个可能会为浏览器造成冲突：

.entry-content-wrapper li { margin-left: 1em; padding:3px 0;}

.entry-content-wrapper div li { 
    text-indent: 0px; 
}

我删除了前面的CSS但使用了你提供的所有其余内容，并添加了以下代码：

ul, ol { margin-bottom: 20px; } ul { list-style: none outside; margin-left: 0px;} ol { list-style: decimal; margin-left: 0px; } ol, ul.square, ul.circle, ul.disc { } ul.square { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc, .entry-content-wrapper ul { list-style: disc outside; } ul ul, ul ol, ol ol, ol ul { margin: 4px 0 5px 0px; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; }

.entry-content-wrapper .borderlist>li:first-child { border-top:1px solid; } .entry-content-wrapper .borderlist>li { border-bottom:1px solid; padding: 5px 0; list-style-position: outside; margin:0;}

.entry-content-wrapper li { 
    margin-left: 40px; 
    padding:0 30px;
    margin-bottom:10px;
}
ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0;
    padding-left:0;

}
ol > li{
    list-style:none;
}
ol > li::before {
    content: "(" counter( li ) ")"; /* Use the counter as content */
   counter-increment:li; /* Increment the counter by 1 */
    padding-right:30px;
    list-style:outside;
}
li {
 width:300px;   
 padding-right:30px;
 text-indent: -50px;

}

现场演示 Here

一旦伪元素标记在主要浏览器中可用，结果基本上可以实现更轻松的实现。

如何缩进<li>正确</li>

3 个答案: