Question

我有一个水平菜单栏，可以有1到4个链接。

我希望每个链接的宽度为25％，而不是取决于它们的数量（因此，如果只有3个链接，则菜单栏应该只有另一个链接的75％）。

使用浮点数到达目标但是如果跨越2行的文本较长，则无法调整其他链接＆＃39;相应的高度，所以我使用display:table-cell解决了这个问题，但是如果是3个链接，则完全忽略width:25%，它会像宽度为33％一样呈现。

<div class="container">
    <div class="block">
        <a href="#">Link 1</a>
    </div>
    <div class="block">
        <a href="#">Link 2</a>
    </div>
    <div class="block">
        <a href="#">
            Link 3 with very long text tha span across 2 rows
        </a>
    </div>
</div>


.container {
    display: table;
    width: 100%;
    border:solid 1px blue;
}

.block {
    border: 1px solid red;
    display: table-cell;
    width: 25%;
}

请查看此 jsFiddle 以查看这两种情况。

期望的结果是第二个菜单栏链接继续具有与第一个相同的宽度，而不是变为33％。

我还尝试将table-layout:fixed添加为其他线程中的读取但是不可用

如何解决这个问题？

Answer 1

当您要求浏览器显示三列表格以使每列的宽度为总宽度的25％时，您正在做出逻辑上不可能的请求。您不能将表的宽度设置为自身的75％。然后，浏览器倾向于将空间均匀地划分为列。

一个简单的解决方法是从width: 100%的规则中删除.container，并在第二个“表”（width: 75%元素格式化为表格）上设置div。

Answer 2

请检查一下。

var n = $(".container .block").length;
var w = (100/n);
$(".container .block").width(w+'%');

见jsFiddle。希望它有所帮助。

Answer 3

如何使用flexbox？

.container {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  border:solid 1px blue;
}

.block {
  border: 1px solid red;
  max-width: 25%;
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;        /* Opera/IE 8+ */
}

a{
  display: block;
  padding: 10px;
}

通过这种方式，您可以轻松调整.block元素的高度... 这是我的解决方案的小提琴：http://jsfiddle.net/o462q4ce/

Answer 4

使用：last-child和:nth-child()选择器的组合，您可以准确定位您需要修改的div.block。不幸的是，使用表格布局并不能让你按照我的意愿管理边距和宽度......

无论如何，这里的解决方案可以满足您的需求

.block:last-child:nth-child(3) {width:auto; padding-right:25%;}
.block:last-child:nth-child(2) {width:auto; padding-right:50%;}
.block:last-child:nth-child(1) {width:auto; padding-right:75%;}

在这个jsFiddle中你可以看到这些选择器在运行：http://jsfiddle.net/5t0fq1sy/

CSS：忽略表格单元格宽度声明

4 个答案: