缩小到适合的菜单项 - 第一项增长 [英] Shrink-to-fit menu items - first item grows

问题描述

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

我想让每个菜单项缩小到适合它的内容，除了

如下：

---

 填充|项目|项目| item 
  

---

到目前为止，实现这个效果是通过在每个菜单项的css代码中使用 display：table-cell 。但是问题是，除非我定义了项目的宽度，它们都扩展为在表中占用相同的宽度。

---

 填充|项目|项目|项目| item 
  

---

解决方案

为什么不使用浮点数？

  #menubar {background-color：lime; width：100％;}。menuitem {float：right; padding-right：10px; padding-left：10px;} / *清除float * /＃menubar：after {content：'';显示：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;}。fill {width：100％; background-color：grey;}  

 < 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索引工作和折叠边框/设置填充/ etc ...

Let's say I have a menu of a pre-specified width.

I want each menu item to shrink-to-fit with its contents, with the exception of ONE, which then fills up the remaining space in the menu.

Like this:

---

                                                       Fill | item | item | item

---

So far the closest I've come to achieving this effect is by using display:table-cell in the css code for each menu item. But the problem is unless I define a width for the item's, they all expand to take up the same amount of width in the table.

---

      Fill      |      item      |      item      |      item      |      item

---

Is there any way to have the item spaces shrink to fit the item and have the fill item just fill up the rest of the div?

解决方案

Why not use a float instead? Just reverse the order of your menu items.

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

---

Alternate way to use display: inline-block that fills the width:

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

The only downfall with this second method is that the menu item's are actually contained within the first menu item / filled. It does the trick for filling width:100%... If they are drop-down menus you will probably want to do some z-index work and collapse borders / set padding / etc...

这篇关于缩小到适合的菜单项 - 第一项增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！