Bootstrap:里面的div

Question

我试图添加divs到我的列表项ul,但这导致Twitter Bootstrap框架表现得很奇怪.这是因为我做错了什么,还是我尝试做的事情有不同的解决方案？

代码:

<h3>Track listing</h3>
<ul class="list-group">
    <li class="list-group-item">
        <div class="song-title">1. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
    <li class="list-group-item">
        <div class="song-title">2. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
    <li class="list-group-item">
        <div class="song-title">3. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
</ul>

CSS代码:

.song-title {float: left;}
.song-duration {float: right;}

我正在使用这些float属性试图让每首歌曲的标题显示在左侧,而持续时间则显示在右侧.从我(非常有限的)CSS经验来看,这应该有效.

结果:

我的印象是列表项的大小不考虑div大小,而是调整大小,好像它们完全是空的.

有什么想法吗？

Answer 1

您可以clear:both在li治疗li的块级元素.

(添加clearfix的li)

曲目列表

<ul class="list-group">
    <li class="list-group-item clearfix">
        <div class="song-title">1. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
    <li class="list-group-item clearfix">
        <div class="song-title">2. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
    <li class="list-group-item clearfix">
        <div class="song-title">3. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
</ul>

检查这个小提琴