浮動：在Chrome中左鍵單擊

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

如何解決問題呢？

來源

2015-01-10 rmpstmp

減少你的HTML標記是什麼鍍鉻顯示這是不正確的？ – EWit

Chrome將列表編號放入.input塊內，但應放在.input塊附近。 – rmpstmp

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

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>

來源

2015-01-10 10:49:12

浮動：在Chrome中左鍵單擊

回答

相關問題