【问题标题】:Custom ol li indent自定义 ol li 缩进
【发布时间】:2018-10-17 04:47:48
【问题描述】:

我发现了一些与此问题相关的主题,但没有一个对我有帮助。

如何解决 li 的第二行像第一行一样尊重缩进的问题?

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: my-awesome-counter;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

ol li {
  counter-increment: my-awesome-counter;
  margin: 1rem 0.25rem;
  line-height: normal;
}


ol li:before {
  display: inline-block;
  content: counter(my-awesome-counter);
  width: 40px;
  height: 40px;
  line-height: 24px;
  background: #000;
  border-radius: 25px;
  color: white;
  text-align: center;
  margin-right: 0.5rem;
  font-size: 24px;
  font-weight: 700;
 }

我错过了什么?

【问题讨论】:

    标签: html css


    【解决方案1】:

    尝试使用position:absolute; 作为伪元素并将padding-left<li>

    查看更新的 sn-p:

    ol {
      list-style: none;
      padding: 0;
      margin: 0;
      counter-reset: my-awesome-counter;
      /*columns: 2;
      -webkit-columns: 2;
      -moz-columns: 2;
      */
      width: 300px;
    }
    
    ol li {
      counter-increment: my-awesome-counter;
      margin: 1rem 0.25rem;
      line-height: normal;
      padding-left: 60px;
      position: relative;
    }
    
    ol li:before {
      display: inline-block;
      content: counter(my-awesome-counter);
      width: 44px;
      height: 40px;
      line-height: 24px;
      background: #000;
      border-radius: 25px;
      color: white;
      text-align: center;
      margin-right: 0.5rem;
      font-size: 24px;
      font-weight: 700;
      position: absolute;
      left: 0;
    }
    <ol>
      <li> test test test testtest test test testtest test test testtest test test testtest test test testtest test test test</li>
      <li> test test test testtest test test testtest test test testtest test test testtest test test testtest test test test</li>
    </ol>

    【讨论】:

      【解决方案2】:

      尝试为伪元素提供负边距并为 li 提供一个 padding-left,如代码所示:

      ol {
        list-style: none;
        padding: 0;
        margin: 0;
        counter-reset: my-awesome-counter;
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
      }
      
      ol li {
        counter-increment: my-awesome-counter;
        margin: 1rem 0.25rem;
        line-height: normal;
        padding-left: 3rem;
      }
      
      ol li:before {
        display: inline-block;
        content: counter(my-awesome-counter);
        width: 40px;
        height: 40px;
        line-height: 24px;
        background: #000;
        border-radius: 25px;
        color: white;
        text-align: center;
        margin-right: 0.5rem;
        font-size: 24px;
        font-weight: 700;
        margin-left: -3rem;
      }
      <ol>
        <li>abv asfbakjh dslsjdgljs lsgljgklj ljsdgll lslgklsdljlsdjgjksd lljljkj hghjgjhgjhgjhjg gjhghjsdf . dgdsg dfg fgsdfsg fg dsfgsf sdfg</li>
        <li>abv asfbakjh dslsjdgljs lsgljgklj ljsdgll lslgklsdljlsdjgjksd lljljkj hghjgjhgjhgjhjg gjhghjsdf . dgdsg dfg fgsdfsg fg dsfgsf sdfg</li>
        <li>abv asfbakjh dslsjdgljs lsgljgklj ljsdgll lslgklsdljlsdjgjksd lljljkj hghjgjhgjhgjhjg gjhghjsdf . dgdsg dfg fgsdfsg fg dsfgsf sdfg</li>
      
      </ol>

      【讨论】:

      • 谢谢,我试图避免使用绝对位置并在之前尝试过这种方法,结果相同,li 弄乱了行高。与以下几行相比,第一行太大
      【解决方案3】:

      您缺少的是您在 pseudo 元素中添加了计数器,但您希望像 ol li 默认样式一样,尽管您通过添加 list-style: none; 重置了 ol 默认行为。要按预期工作,您应该遵循以下方式:

      ol {
          list-style: none;
          padding: 0;
          margin: 0;
          counter-reset: my-awesome-counter;
          columns: 2;
          -webkit-columns: 2;
          -moz-columns: 2;
      }
      ol li {
          counter-increment: my-awesome-counter;
          margin: 1rem 0.25rem;
          line-height: normal;
          position:relative;
          padding-left:45px;
          min-height:40px;
      }
      ol li:before {
          display: inline-block;
          content: counter(my-awesome-counter);
          width: 40px;
          height: 40px;
          line-height: 36px;
          background: #000;
          border-radius: 25px;
          color: white;
          text-align: center;
          margin-right: 0.5rem;
          font-size: 24px;
          font-weight: 700;
          position:absolute;
          left:0;
          top:0;
      }
      

      【讨论】:

      • 谢谢,我试图避免绝对位置,但最后我认为没有其他办法......谢谢我会采用这种方法
      【解决方案4】:

      尝试将display: flex 分配给ol li

      像这样:

      ol li {
        counter-increment: my-awesome-counter;
        margin: 1rem 0.25rem;
        line-height: normal;
        display: flex;
      }
      

      这里的工作演示: https://codepen.io/NightShade1993/pen/ReQWOb

      【讨论】:

        【解决方案5】:

        尝试将之前的位置设为绝对位置,使其出现在列表顶部

        我在这里附上了两个例子:

        第一个就是答案。

        第二个是为什么我们应该给出绝对位置。

        <!DOCTYPE html>
        <html>
        <head>
        <style>
        ol{width:250px;}
        ol.a{
          list-style-position: outside;
          margin: 0;
          counter-reset: my-awesome-counter;
          display:block;
          position: relative;
          list-style-type:none;
          }
        ol.a li {
          counter-increment: my-awesome-counter;
          display:block;
          padding-left: 10px;
          margin-bottom: 10px;
        }
        
        ol.a li:before {
          display: inline-block;
          content: counter(my-awesome-counter);
          width: 40px;
          height: 40px;
          line-height: 24px;
          background: #000;
          border-radius: 25px;
          color: white;
          text-align: center;
          margin-right: 0.5rem;
          font-size: 24px;
          font-weight: 700;
          position:absolute;
          left: 0;
         }
         ol.b li:before{
             display: inline-block;
          content: counter(my-awesome-counter);
          width: 40px;
          height: 40px;
          line-height: 24px;
          background: #000;
          border-radius: 25px;
          color: white;
          text-align: center;
          margin-right: 0.5rem;
          font-size: 24px;
          font-weight: 700;
          }
        
        
        
        </style>
        </head>
        <body>
         <h2>With `postion:absolute`</h2>
        <ol class="a">
          <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
           <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
           <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
        </ol>
         <br><br>
        <h2>Without `position:absolute`</h2>
           <ol class="b">
          <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
           <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
           <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
        </ol>
        
        </body>
        </html>

        当我们不定位之前的位置时会发生这种情况。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2020-08-18
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多