浮动的ul折叠，导致孩子li在彼此下面包裹，而不是出现在一行中。

Question

我有一个div (.user-band)，里面有一个向左浮动的div (.user-block)和一个向右浮动的UL (.user-stats)。

现在的问题是，当我给'ul‘(.user-stats)的子'li’项以百分比表示的width/min-width时。'li‘项在'ul’中没有出现在一行中，但如果我给出的是相同的像素宽度(例如250px)，它们就会出现在一行中。

有人能告诉我这里出了什么问题吗？

下面是HTML：

<div class="clearfix user-band">
                    <div class="clearfix user-block">
                        <div class="user-pic">
                            <div class="pic-box">
                                <img src="images/user-pic.jpg" alt="">
                            </div> <!--pic-box-->
                        </div> <!--user-pic-->
                        <div class="user-info">
                            <p class="user-id">Martin</p>
                            <p class="user-location"><span class="fa fa-map-marker ic-location"></span> Los Angeles</p>
                        </div> <!--user-info-->
                    </div> <!--user-block-->

                    <ul class="user-stats">
                        <li class="stats-title">
                            Completed Deals
                            <span class="stats-value">15</span>
                        </li>

                        <li class="stats-title">
                            Pending Deals
                            <span class="stats-value">7</span>
                        </li>

                        <li class="stats-title no-click">
                            Total Commission
                            <span class="stats-value">$500</span>
                        </li>
                    </ul>
                </div> <!--user-band-->

下面是CSS：

.user-band { border: 1px solid #e26513; background: #F0701B; padding: 10px; }
.user-block { float: left; }
.user-pic, .user-info { float: left; }
.user-info { margin-left: 10px; }
.user-pic { padding: 2px; border-radius: 2px; background: #ffffff; }
.pic-box { overflow: hidden; text-align: center; width: 80px; height: 80px; }
.pic-box > img { max-width: 100%; min-height: 100%; }
.user-id { font-weight: 700; font-size: 18px; color: #ffffff; }
.user-location { color: #ffffff; }
.user-stats { float: right; margin: -10px -10px -10px 0; list-style-type: none; padding-left: 0; }
.user-stats { float: right; margin: -10px -10px -10px 0; list-style-type: none; padding-left: 0; }
.user-stats > li { display: inline-block; min-width: 250px; padding: 24px 10px; text-align: center; font-size: 14px; color: #ffffff; border-left: 1px solid #e26513; margin-left: -4px; cursor: pointer; }
.user-stats > li:hover { box-shadow: 0 0 200px #e26513 inset; }
.stats-value { font-weight: 700; display: block; font-size: 25px; }
.user-stats > li.no-click { cursor: auto; }
.user-stats > li.no-click:hover { box-shadow: none; }
.ic-location { font-size: 20px; }

Answer 1

您需要设置UL的宽度-因为它是浮动的。

http://codepen.io/elliz/pen/IeDCd/

4月15日-钢笔更新

看更新的笔，你是什么意思？

注释-使代码更具语义性，但并不完美。