Question

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

现在的问题是我给孩子的宽度/分钟宽度百分比＆＃39; li＆＃39; ＆lt; ul＆＃39; （。用户提供的统计信息）。＆＃39; li＆＃39;项目没有出现在＆＃39; ul＆＃39;中，但如果我在像素中给出相同的宽度（即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日 - 笔更新

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

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

漂浮的ul坍塌，导致孩子李相互包裹而不是出现在一排

1 个答案:

4月15日 - 笔更新