Question

客户需要导航布局，如下所示：

How the menu works

如您所见，它由“主链接”和“子链接”组成。每个都可以有任意数量，文本内容可能会发生变化。菜单容器的宽度将根据页面大小而改变。

上帝保佑设计师，他们决定对齐这些链接的左右边缘，并在每个链接之间保持一致的空间。客户端坚持，这就是导航的方式。

所以，问题是：如何做到这一点？我已经尝试过使用表格（CSS和HTML），但是当它们在总长度上对齐时，单元格中的文本不会在右侧对齐。

目前的解决方案是在元素上放置一定量的填充，直到它们排成一行，但显然这是一个垃圾解决方案。我不想最终用Javascript来衡量一些东西，所以如果有人知道一个聪明的方法来完成它，我当然会很感激。

Answer 1

我确实认为CSS表可以帮到你。

您只需要对齐每个

的第一个和最后一个元素的文本

JSfiddle Demo

<强> CSS

* {
    margin: 0;
    padding: 0;
}

.menu ul {
    padding: 0 3px;
    display: table;
    width:100%;
}
.menu-list li {
    height: 45px;
    list-style: none;
    background-color: #f69b58;
    display:table-cell;
    /* add this */
    text-align: center;
    font-family: arial;
    font-size: 14px;
    margin-right: 2px;
}

.menu-list li:first-child {
    text-align:left;
}

.menu-list li:last-child {
    text-align:right;
}

.menu-list li a {
    display: block;
    padding: 13px;
    color: #ffffff;
    text-decoration: none;
}

.menu-list li:active {
    color:black;
    background-color: #3EAEE9;
}
.menu-list li:hover {
    background:#3eaee9;
}
.menu-list li.current {
    background-image: -webkit-linear-gradient(top, rgb(7, 80, 158), rgb(6, 101, 243));
    background-color: #3EAEE9;
}

注意：这不会使每个链接之间的距离相同，因为您（几乎可以肯定）需要JS。

Answer 2

这听起来像是关于正确数量的div来调整中心文本的东西。我已经在小提琴中找到了一个解决方案，你可以在这里看到：http://jsfiddle.net/denWG/32/

HTML：

<body>
    <div class="container">
    <div class="in_container">
       <a href="" class="name">Example Exampleson</a>
    </div>
    <div class="in_container">
       <a href="" class="title">Producer</a>
    </div>
    </div>
</body>

CSS：

.container{
    width: 200px;
    height: 200px;
}

.in_container{
    text-align: center;  
}

}
.name {
    font-weight: bold;
    margin: 0 auto;
}

.title {
    margin: 0 auto;
    font-size: 11px;
    line-height: normal;
}

将元素对齐到左侧和右侧

2 个答案: