float:left Chrome 中的主动李

Question

当我制作 float: left to block inside

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 and counter-increament

减少 html 标记

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;
}

<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>

float:left Chrome 中的主动李

float:left insive li in Chrome

html

css

google-chrome

html-lists