CSS列表项样式作为表

时间:2014-01-16 18:30:41

标签: html css

所以这就是问题所在。该页面可在浏览器中编辑。当我添加内容并创建一个新的列表项时,IE会产生一些奇怪的结果。不正确创建列表项。这在Firefox和Chrome中都有效。这种样式的原因是自定义缩进以使包装文本排成一行。我必须使用display:table,display:table-row和display:table-cell,以便正确对齐。

html:

<ol contenteditable="true">
    <li>this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test </li>
    <li>this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test</li>
</ol>

CSS:

ol {
    counter-reset: item;
    display:table;
    margin-left:10px;
    padding:0px;
}
ol li:before {
    content: counter(item, decimal) ".";
    counter-increment: item;
    margin-right: 10px;
    font-weight: bold;  
    display:table-cell;
    width:1.6em;
}

ol li{
    display:table-row;    
}

http://jsfiddle.net/xpAMU/174/

0 个答案:

没有答案