Html 浮动的ul折叠，导致子李彼此包裹，而不是出现在一行中

我有一个div（.user band），里面有一个div（.user block）向左浮动，一个UL（.user stats）向右浮动

现在的问题是，当我给“ul”（用户统计）的子“li”项指定宽度/分钟宽度百分比时。“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-->

---

您需要在UL上设置一个宽度，因为它是浮动的

4月15日-Pen更新 看更新的钢笔，你是什么意思

---

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

添加

宽度：100%'

将ul带到下一行，使

浮动：正确属性没有意义。我使用UL作为
float:right
的目的是将整个UL串保持在
元素旁边的同一行中。我想给li项目一个宽度百分比，这样它们在响应视图中自动调整宽度。
.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; }