Question

当我浮动时：左侧阻挡

Chrome显示不正确。

<body>
<ol>
    <li>
        <div class="input"></div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</div>
    </li>

    <li>
        <div class="input"></div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</div>
    </li>

    <li>
        <div class="input"></div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</div>
    </li>
</ol>

    .input {
    display: inline-block; 
    background: #999; 
    width: 15px; 
    height: 15px; 
    border-radius: 2px; 
    margin-right: 10px; 
    float: left;
}
.text {
    display: block;
    overflow: hidden;
}

如何解决问题？

Answer 1

您可以使用counter-reset和counter-increament

来减少html标记

＆＃13;

ol {
  list-style: none;
  counter-reset: section;
}
ol li {
  position: relative;
}
ol li:before {
  counter-increment: section;
  content: counter(section);
  background: #999;
  width: 15px;
  height: 15px;
  padding: 2px;
  text-align: center;
  border-radius: 2px;
  position: absolute;
  left: -28px;
}

＆＃13;

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</li>
</ol>

＆＃13;

float：在Chrome中留在li里面

1 个答案: