html - 块大于应有的大小

Question

所以我正在创建一个设计，当我测试它时，边框在内容的左侧有点偏。它没有在里面的内容周围创建一个边框，它创建了一个更大的边框。

HTML

<ul id="profile_stats">
<li class="top"><b>100</b><br /><i>short</i></li>
<li class="top"><b>100</b><br /><i>long</i></li>
<li class="top"><b>100</b><br /><i>images</i></li><br />
<li class="bottom"><b>10</b><br /><i>friends</i></li>
<li class="bottom"><b>10</b><br /><i>followers</i></li>
</ul>

CSS

ul#profile_stats {
    float: right;
    list-style-type: none;
    border-radius: 5px;
    margin-right: 10px;
    border: 1px solid #222;
    width: 180px;
}

ul#profile_stats li {
    float: left;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul#profile_stats .top {
    width: 60px;
    background: #B0B0B0;
    border-bottom: 1px solid #FFF;
}

.top:not(:nth-of-type(1)) {
    border-left: 1px solid #FFF;
}

.top:not(:nth-of-type(3)) {
    border-right: 1px solid #000;
}

ul#profile_stats .bottom {
    width: 90px;
    background: #555;
    border-top: 1px solid #000;
}

JSFiddle：http: //jsfiddle.net/rU8N9/8/

Answer 1

默认情况下，大多数浏览器会使用一些左侧填充来渲染 ul，我认为这会干扰您的设计，请尝试：

ul {padding-left: 0;}

希望能帮助到你。

Answer 2

ul {padding: 0px 0px 0px 0px;}