Html 收缩以适应菜单项-第一项增长_Html_Css

Html 收缩以适应菜单项-第一项增长

html css

Html 收缩以适应菜单项-第一项增长,html,css,Html,Css,假设我有一个预先指定宽度的菜单我希望每个菜单项都缩小以适应其内容，只有一个例外，它会填满菜单中的剩余空间像这样：到目前为止，我最接近实现这种效果的方法是在css代码中为每个菜单项使用display:table cell。但问题是，除非我为项目定义宽度，否则它们都会展开以占据表中相同的宽度有没有办法让项目空间缩小以适合项目，让填充项目只填充div的其余部分？为什么不使用浮动呢？只需颠倒菜单项的顺序即可 #菜单栏{ 背景色：石灰；宽度：100%； } 梅努特姆先生{ 浮动：对；

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

我希望每个菜单项都缩小以适应其内容，只有一个例外，它会填满菜单中的剩余空间

像这样：

到目前为止，我最接近实现这种效果的方法是在css代码中为每个菜单项使用

display:table cell

。但问题是，除非我为项目定义宽度，否则它们都会展开以占据表中相同的宽度

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

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

#菜单栏{
背景色：石灰；
宽度：100%；
}
梅努特姆先生{
浮动：对；
右边填充：10px；
左侧填充：10px；
}
/*净浮动*/
#菜单栏：之后{
内容：''；
显示：块；
清楚:对,；
}


项目
项目
项目
项目
填满

使用表格的解决方案

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


#梅努巴{
宽度：100%；
}
菲尔巴先生{
宽度：100%；
文本对齐：右对齐；
背景颜色：灰色
}
填满
项目
项目
项目
项目
项目

只需添加样式（填充/间距/等）或任何您需要的内容

对于那些想要使用表的人，可以给第一个“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>

您可能需要设置

空白：nowrap

太多，否则所有的单词都会被包装，或者给

td

一些更大的

width
我处理这个问题的一种方法是应用width:1px到我希望他们的细胞缩小的每个
。然后在我想缩小到内容的每个单元格上，我应用空白：nowrap。这可以防止单元格实际缩小到1px。

我目前在财务数据表上使用此方法，因此我不确定它是否适用于较长的文本段落。
类似于@cjezowicz所说的，您可以使用空白
并创建一个单元格宽度：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>


填满
项目
项目
项目
项目
div#行{显示：表格；宽度：100%；}
div.cell{显示：表格单元格；文本对齐：中心；垂直对齐：中间；}
div.cell.fill{宽度：100%；}
div.cell.shrink{空白：pre；}

然后，如果需要为任何缩小的单元格强制设置宽度，请在该单元格上使用min width
。欢迎来到2014年
让我们灵活点
当成为标准时，我们现在可以展望未来。目前，Flexbox受到以下限制（重要的是，只有IE 11支持当前型号）
灵活导航，第一个孩子更大
加价

组合（添加绒毛）
运行下面的代码段

/*
在本演示中：
单击即可切换活动类
*/
$（'nav a'）。在（'click'，function（）上{
$（'nav a'）。removeClass（'active'）；
$（this.toggleClass（'active'）；
});
<代码> /*基础属性*//
导航{
显示器：flex；
}
导航a{
flex:0自动；
文本对齐：居中；
}
导航a：第一个孩子{
弹性：10自动；
文本对齐：右对齐；
}
/*绒毛特性*/
身体{
背景:#f5；
保证金：0；
}
导航{
最大宽度：900px；
保证金：0自动；
背景#3f51b5；
}
导航a{
字体系列：Helvetica；
颜色：#c5cae9；
字号：0.8em；
文本转换：大写；
文字装饰：无；
边框底部：实心2px#3f51b5；
填充：4em 1em 0；
过渡：均为0.5s；
}
主动导航{
颜色：#fce4ec；
边框底部：实心2px#fce4ec；
}
导航a：悬停{
颜色：#FFF；
}

那么您想不想使用表格？我不想使用表格，但我想实现上述效果，即一个项目填满未占用的空间。充满了，意义占据了一切。看起来你没有给出一个非常明确的理由。你为什么要填满这个空间？（例如）家长中的一组浮动div有什么问题？填写表格有什么重要的？当我们了解了所有的问题时，你会惊讶于什么能让问题变得更容易。我希望有一个视觉效果（这就是为什么我得到这个并不重要），我可以悬停在“填充”项上，让菜单的其余部分点亮，因为“填充”项就是这样特别的。（就像WordPress主题中的“链接”菜单项）问题的可能重复之处在于menuitem“fill”并不会占用其余菜单栏的全部内容；它只是浮动正确。奇怪的问题：所以你需要填充来真正填充菜单栏？试试第二种浮动方法。。。（下半部分）。。。如果这不适用于您，那么剩下的唯一跨浏览器/安全方法就是使用表。。。为什么菜单/填充“必须”来“填充”空间？第二部分是一个合理的解决方法。我不认为还有别的办法，所以我接受你的答案。谢谢：）我在IE中测试后给了你+1。然后我意识到，这在chrome中是不受支持的。尚未测试其他浏览器，但这是一个主要缺陷。截至2012年7月，Chrome占浏览器使用量的27%，IE占23%，Firefox占19%，Safari占15%。@MrJones谢谢你注意到Jones先生，我不记得我制作Chrome时它是否在Chrome中工作过，我可能只在Firefox和IE中测试过它，预计Opera和Chrome也能工作。我通过颠倒逻辑修复了上面的例子，我没有将所有td设置为宽度0，而是将.fill的宽度设置为大得离谱，现在它可以在Chrome、Opera、Firefox、IE5.5-9+1中使用，因为当在px
或em中使用时，旧的“大得离谱”技巧会起作用
<!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>

table td {
  width:1px;
}

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

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

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