如何压缩div中的元素

Question

我有一个这种结构的div：

<div id="navigation">
    <a href="#">Overview</a>
    <a href="#">Test</a>
    <a href="#">test 2</a>
</div>

其中显示的内容如下：

现在，我有一个jquery代码在“导航”中附加元素。问题是，我不知道如何让它看起来像这样：

..特别是如果有很多链接标签。

这是“导航”的css

#navigation{
    background: #efefef;
    height: 40px;
    width: 732px;
}

对于标签：

#navigation a{
   min-width: 108px;
   padding: 11px;
   display: inline-block;
   text-align: center;
}

感谢。

Answer 1

首先，您需要max-width代替min-width才能获得链接。或者，如果您始终希望将它们均匀地分布在父级上，则只需width 这个宽度需要由你计算，因为浏览器本身不能这样做。在我们的示例中，有3个链接，因此每个链接的宽度需要为100/3 = 33.3％。

然后是一些更多的样式，比如文本溢出，来处理椭圆，你最终会得到这个：

#navigation a{
   width: 33.3%;
   float:left;
   padding:11px;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;
   display:inline-block;
   text-align:center;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}

jsFiddle

正如你所看到的，我也不得不漂浮它们，以摆脱它们之间的空间。如果您不想要任何浮动，请在计算宽度时考虑空格。

Answer 2

这是fiddle link

*{
    padding:0;
    margin:0;
    }
body {
    font:normal 12px/18px Arial, Helvetica, sans-serif;
    color:#000;
    padding:20px;
    background-color:#F2F2F2;
    }
ul, li, ol {
    list-style-type:none;
    }

.wrapper {
    width:940px;
    padding:10px;
    overflow:hidden;
    height:100%;
    margin:0 auto;
    border:1px  solid green;
    background-color:#3D3A40;
    border:8px solid #fff;
}
.spacer {
    clear:both;
    font-size:0;
    line-height:0;
    height:0;
    }
p {
    padding-bottom:18px;
    }

#navigation{
    background:#efefef;
    height:40px;
    font-size:14px;
    line-height:40px;
}
#navigation li {
    float:left;

    }
#navigation li a{
    padding:0 19px;
    display:block;
    text-align:center;
    color:#35B4DE;
    text-decoration:none;
    float:left;
}
#navigation li a:hover,
#navigation li a.active {
     background:#35B4DE;
    color:#fff;
    }
#navigation li span {
    width:15px;
    height:15px;
    background-color:#FF0000;
    margin:13px  0 0 10px;
    display:block;
    float:right;
    }
#navigation li i.arrow {
    line-height:40px;
    color:#fff;
    background-color:#35B4DE;
    display:block;
    float:right;
    padding:0 5px;
    }
#navigation li i.arrow a {
    padding:0;
    color:#fff;
    background-color:#35B4DE;
    }

<强> JS

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#navigation li.icon a").append("<span></span>");
        $("#navigation li:last").append("<i class='arrow'><a href='#'>&raquo;</a></i>");
    });
</script>