样式列表

如何才能通过以下代码风格：样式列表

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

enter image description here

这是可能的，还是有HTML需要divs？ Stackoverflow使用一大堆嵌套的div来做到这一点，但它可以清理使用无序列表的代码？

来源

2013-12-23 Hopstream

添加几个div可能会更容易。 – user1336827

我没有检查过它，但是你看过浏览器的Web Inspector/Web开发者工具中的CSS吗？ –

@DavidThomas是的，stackoverflow不使用列表。它使用了一大堆嵌套的div。 – Hopstream

我自己拿是：

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。

来源

2013-12-23 18:06:46

这可能做的伎俩：

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

来源

2013-12-23 18:01:51

我usualy使用此代码。

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

来源

2013-12-23 18:05:18 GeckoTang

回答

相关问题