如何使用CSS在嵌套的無序列表中保持第二行的縮進？

Question

我看到了這個，它幫助了我。 但是現在我需要為嵌套的 ul li 保留要縮進的第二行文本。 如何實現這一目標？

示例如下。

-List item
-List item
  - It is a long established fact that a reader will be distracted by the readable 
 content of a page when looking at its layout. 
-List item

我目前的 CSS 是

ul li {
    list-style-type: disc;
    line-height: 1.6;
  font-size: 14px;
  font-family: "Montserrat-Light";
  list-style-position: outside;
}

ul li li {
    list-style-type: circle;
    line-height: 1.6;
  font-size: 14px;
  font-family: "Montserrat-Light";
  list-style-position: inside;
    text-indent: 1em;
}

Answer 1

您必須使用答案中的更新解決方案：

ul {
   list-style-position: outside;
}

下面是一個例子：

 p { margin: 7px 0; } li { list-style-type: disc; padding-left: 1em; } ol { list-style-position: outside; }

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> <ol> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</li> <li>Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li> <li> Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus. <ol> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ol> </li> </ol>

Answer 2

你必須小心嵌套ul和ol 。 但是，它們可以嵌套在li內。

嘗試這個

 .none{ list-style:none; }

 <ul> <li>Item 1</li> <li class="none"> <ul> <li>Child item 1</li> <li>Child item 2</li> </ul> </li> <li>Item 3</li> </ul>