欢迎来到2014年

Question

假设我有一个预先指定宽度的菜单。

我希望每个菜单项都缩小到适合其内容，但ONE除外，然后填充菜单中的剩余空间。

像这样：

                                                       Fill | item | item | item

到目前为止，我最接近实现此效果的方法是在每个菜单项的css代码中使用display:table-cell。但问题是，除非我为项目定义宽度，否则它们都会扩展为占用表格中相同的宽度。

      Fill      |      item      |      item      |      item      |      item

有没有办法让项目空间缩小以适合项目，并且填充项目只是填满div的其余部分？

Answer 1

对于那些想要用表做的人，可以给第一个“td”一个类并将其设置为一个非常大的宽度，然后它会推动并强制其他列尽可能地缩小。它的工作原理是因为表的扩展速度不能超过它们设置的宽度。

例如：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table td {
    border:solid 1px #000;
}
table td.fill {
    width:9999em;
    text-align:right;
}
table {
    width:300px;
    border-collapse:collapse;
}
</style>
</head>
<body>
    <table>
        <tr><td class="fill">Fill</td><td>item</td><td>item</td><td>item</td></tr>
    </table>
</body>
</html>

在仅在Firefox和IE中工作的旧示例中，我将“td”宽度设置为0，然后尽可能地缩小列。

您可以通过将td宽度设置为较小的值来将所有列设置为缩小到适合度，例如，如果不设置表格宽度，则为1px，这适用于Chrome，Firefox和IE。

table td {
  width:1px;
}

您可能也想设置white-space:nowrap;，否则所有字词都会换行，或者td更大一些width

Answer 2

我处理此问题的一种方法是将width: 1px;应用于我希望其细胞缩小的每个<TH>。然后，在我想缩小到内容的每个单独的单元格上，我应用white-space: nowrap;。这可以防止单元格实际缩小到1px。

我目前在财务数据表上使用这种方法，所以我不确定它是否适用于较长段落的文本。

Answer 3

为什么不使用浮动？只需颠倒菜单项的顺序即可。

#menubar {
  background-color: lime;
  width: 100%;
}
.menuitem {
  float: right;
  padding-right: 10px;
  padding-left: 10px;
}

/* Clear float */
#menubar:after {
  content: ' ';
  display: block;
  clear: right;
}

<div id="menubar">
  <div class="menuitem">item</div>
  <div class="menuitem">item</div>
  <div class="menuitem">item</div>
  <div class="menuitem">item</div>
  <div class="menuitem">fill</div>
</div>

使用填充宽度的display: inline-block的替代方法：

#menubar {
  width: 100%;
  text-align: right;
}
.menuitem {
  display: inline-block;
  background-color: aqua;
}
.filled {
  width: 100%;
  background-color: gray;
}

<div id="menubar">
  <div class="menuitem filled">fill
    <div class="menuitem">item</div>
    <div class="menuitem">item</div>
    <div class="menuitem">item</div>
  </div>
</div>

第二种方法唯一的缺点是菜单项实际上包含在第一个菜单项/填充中。它可以填充width:100% ...如果它们是下拉菜单，你可能想要做一些z-index工作并折叠边框/设置填充/等...

Answer 4

欢迎来到2014年

让我们变得灵活

我们现在可以期待 Flexbox 是标准的未来。目前是W3C Candidate Recommendation，Flexbox目前受browser support限制（重要的是，只有IE 11支持当前模型）。

灵活导航，拥有更大的第一个孩子

标记

<nav>
    <a href="#">Fill</a>
    <a href="#">Item</a>
    <a href="#">Item</a>
    <a href="#">Item</a>
</nav>

flex

常规链接获得flex: 0 0 auto：

0 - 不要成长
0 - 不要缩小
auto - 不要让文字溢出（auto应该是默认的，但文字会在没有设置的情况下溢出）

第一个链接获得flex: 1 0 auto：

1 - 占用剩余宽度
0 - 不要缩小
auto - 不要让文字溢出

nav {
  display: flex;
}
nav a {
  flex: 0 0 auto; 
}
nav a:first-child {
  flex: 1 0 auto;
}

This Flexbox guide is very helpful.

组合（添加绒毛）

运行下面的代码段

＆＃13;

/* 
For the purpose of this demo:
toggle active class on click
*/

$('nav a').on('click', function() {
  $('nav a').removeClass('active');
  $(this).toggleClass('active');
});

＆＃13;

/* Foundation Properties */
nav {
  display: flex;
}
nav a {
  flex: 0 0 auto;
  text-align: center;
}
nav a:first-child {
  flex: 1 0 auto;
  text-align: right;
}

/* Fluff Properties */
body {
  background: #f5f5f5;
  margin: 0;
}
nav {
  max-width: 900px;
  margin: 0 auto;
  background: #3f51b5;
}
nav a {
  font-family: Helvetica;
  color: #c5cae9;
  font-size: 0.8em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: solid 2px #3f51b5;
  padding: 4em 1em 0;
  transition: all 0.5s;
}
nav a.active {
  color: #fce4ec;
  border-bottom: solid 2px #fce4ec;
}
nav a:hover {
  color: #FFF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <a href="#" class="active">Fill</a>
  <a href="#">Item</a>
  <a href="#">Item</a>
  <a href="#">Item</a>
</nav>

＆＃13;

Answer 5

使用表格的解决方案

<style type="text/css">

#menubar {
    width:100%;
}

.FillBar {
    width:100%;
    text-align:right;
    background-color:gray
}

</style>



<table id="menubar">
<tr>
<td class="FillBar">Fill</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
</table>

只需添加样式（填充/间距/等）或其他任何你需要的东西......

Answer 6

与@cjezowicz所讨论的相似，你可以使用white-space和一个单元width: 100%来实现你正在寻找的效果：

<div id="row">
   <div class="cell fill">Fill</div>
   <div class="cell shrink">Item</div>
   <div class="cell shrink">Item</div>
   <div class="cell shrink">Item</div>
   <div class="cell shrink">Item</div>
</div>

<style type="text/css">

   div#row { display: table; width: 100%; }

   div.cell { display: table-cell; text-align: center; vertical-align: middle; }

   div.cell.fill { width: 100%; }

   div.cell.shrink { white-space: pre; }

</style>

然后，如果您需要为任何缩小的单元格强制设置宽度，请使用该单元格上的min-width。

收缩到适合的菜单项 - 第一项增长

6 个答案:

欢迎来到2014年

让我们变得灵活

灵活导航，拥有更大的第一个孩子

标记

flex

组合（添加绒毛）