样式列表，如Stack Overflow侧边栏

Question

如何设置以下代码的样式：

<ul>
   <li><span>282</span>How to make twitter bootstrap menu dropdown on hover rather than click</li>
   <li><span>3</span>How to change Bootstrap's dropdown's form?</li>
<ul>

所以看起来这只是使用css：

这可能还是html需要div？ Stackoverflow使用一大堆嵌套的div来执行此操作但是可以仅使用无序列表来清理该代码吗？

Answer 1

这可以解决问题：

<强> FIDDLE

CSS：

li{
    list-style-type:none;
    width:170px;
    position:relative;
    padding:5px 0 5px 30px;
    color:blue;
}

span{
    position:absolute;
    left:0;
    top:5px;
    background:#ccc;
    color:#333;
    width:25px;
    text-align:center;
}

Answer 2

我通常使用此代码。

fiddle

CSS：

ul {
    list-style: none;
    padding:0;
    margin:0;
}
ul span{
    display: inline-block;
    background: #ccc;
    color: #000;
    min-width:2.5rem;
    text-align: center;
    margin-right: 1rem;
    text-indent: 0;
}
ul li{
    text-indent: -3.5rem;
    padding-left: 3.5rem;
    color: #0077cc;
    margin-bottom: 1rem;
}

Answer 3

我自己的看法是：

ul, li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li {
    margin: 0 0 0.5em 4em;
    position: relative;
}

li span {
    position: absolute;
    left: -3em;
    background-color: #ccc;
    width: 2em;
    text-align: center;
}

JS Fiddle demo