html - 如何压缩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

这是小提琴链接

*{
    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>

Answer 2

首先，您需要链接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

正如你所看到的，我还必须让它们浮动，以消除它们之间的空间。如果您不想要任何浮点数，请在计算宽度时将空格考虑在内。