问题给出边界：1px solid #CCC到我的#site .home .stats .views li

Question

我试图给边框：1px固定#CCC到我的#site .home .stats .views li{}，但它不能正常工作。

我的设计在我的图片中看到了突破：

这里我的代码没有边框：http://jsfiddle.net/jcak/L7qy4vh4/2/

我希望我的结构正如你在小提琴中所看到的那样，但在#site .home .stats .views li{}中有边框。

我已经尝试过所有的数学计算，但我的结构总是打破边框：1px。

你能帮我理解如何在不破坏结构的情况下给出边框吗？

我的Html：

<div id="site">
    <div class="content home">
        <div class="left">
            <div class="box_left stats">
                <h3>Website stats</h3>
                <div class="conteudo"> 
                    <ul class="views">
                        <li class="visitas">
                            1000
                            <small>Stats</small>
                        </li>
                        <li class="visitas">

                            1000
                            <small>Stats</small>
                        </li>
                        <li class="media" class="right">

                            1000
                            <small>Stats</small>
                        </li>
                    </ul>
                    <ul class="views">
                        <li class="topic">
                            1000
                            <small>Stats</small>
                        </li>
                        <li class="comment">
                            1000
                            <small>Stats</small></li>
                        <li class="cats">1000
                            <small>Stats</small>
                        </li>
                    </ul>

                    <ul class="views">
                        <li class="topic">
                            1000
                            <small>Stats</small>
                        </li>
                        <li class="comment">
                            1000
                            <small>Stats</small></li>
                        <li class="cats">1000
                            <small>Stats</small>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

我的Css：

*{margin:0; padding:0; font-family: 'Open Sans', sans-serif;}

#site{width:100%; background:#fff; min-height:300px; padding:20px 0;}

#site .content{width:1000px; margin:0 auto;}

#site .home .left{float:left; width:400px;}

#site .home .box_left{background:#eee; float:left; width:400px;}

#site .home .box_left h3{padding:15px; background:#ccc; font-size:22px; font-weight:400;  font-weight:bold;}

#site .home .box_left h3 a{float:right; text-transform:uppercase; margin-top:4px; font-weight:bold; text-decoration:none; font-size:17px; color:#888;}

#site .home .box_left h3 a:hover{text-decoration:underline;}

#site .home .box_left .conteudo{padding:20px; width:400px; float:left;}

#site .home .stats{margin-bottom:30px;}

#site .home .stats .views{float:left; width:360px;list-style:none; background:#fbfbfb; position:relative;}

#site .home .stats .views li{float:left; text-align:center;  font-size:20px; width:60px;padding:30px 30px 30px 30px;}

#site .home .stats .views li small{display:block; font-size:13px; color:#000; }

#site .home .stats .views .right{float:right; margin-right:0;}

Answer 1

我不确定您的要求，如果您想将所有li排成一行，下面的更改将有助于您克服问题

这是因为，您为width编写了views的硬编码，将宽度增加了5-7px;这是 DEMO

Answer 2

尝试编辑#site .home .stats .views li，如下所示：

#site .home .stats .views li {
  ...
  width: 120px;
  box-sizing: border-box;
  ...
}

Answer 3

你在div中div有div ....这可以，但可能很乱。这是代码。它的工作原理

site .home .stats .views{float:left; width:370px;list-style:none; background:#fbfbfb; position:relative;padding:0px;}
site .home .stats .views li{float:left; text-align:center;  font-size:20px; width:60px;padding:30px 30px 30px 30px;   border: 1px solid;}