子弹编号未正确对齐

时间:2013-07-05 08:30:42

标签: html twitter-bootstrap

我在页面上使用网状光滑的ui light字体。

当我在子弹编号上使用字体时,它没有正确对齐。从图像上可以看出。 我尝试将字体更改为打开sans,但仍然相同。它在arial上变得更好但仍感觉不对。

enter image description here

2 个答案:

答案 0 :(得分:0)

HTML

 <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
    </ul>
    </div>

<强> CSS

#navlist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}

#navlist li
{
padding-left: 10px;
list-style-type:lower-alpha;
}

答案 1 :(得分:0)

此处已更正 fiddle

<强> CSS

*{
    padding:0;
    margin:0;
    }
body {
    font:normal 12px/18px Arial, Helvetica, sans-serif;
    color:#000;
    padding:20px;
    }

ol {
    list-style-type:lower-alpha;
    color:#4E4E4E;
    background-color:inherit;
    padding:0 0 5px 30px;
}
ol li {
    padding-bottom:7px; 

}

<强> HTML

<ol>
    <li>Testing 1</li>
    <li>Testing 2</li>
    <li>Testing 3</li>
    <li>Testing 4</li>
</ol>
相关问题