3

我有几个水平放置的项目应该：

  1. 始终保持单行（从不换行）。
  2. 宽度不得大于其内容或最大宽度，以较小者为准。
  3. 当 max-width 限制其宽度时，用省略号截断。
  4. 宽度不能小于它们的最小宽度。

这些项目共享同一个父项。如果父项的宽度太小而无法使用上述规则包含项目，则项目应按宽度缩小，但永远不会比它们的最小宽度更薄。

编辑：换句话说，如果父母大于孩子的总宽度，那很好。子级不应扩展以填充父级。如果按照数字 1、2、3 和 4 的指示，父级变得小于子级的总宽度，则子级应缩小以保持在新的父级宽度内。在 Chrome 的浏览器标签中可以看到一个这样的例子（实际上是我想要重现的）。选项卡具有最大宽度和最小宽度。如果您开始按宽度缩小浏览器，那么它将达到标签不再适合的程度，因此它们开始缩小，直到达到最小宽度。

我已经确定了数字 1、2、3 和 4，但我不知道如何让它们缩小以保持在父宽度内。任何帮助将非常感激。

示例 HTML：

<div class="container">
    <div class="tab"><span>Bookmark</span></div><div class="tab"><span>Finish</span></div><div class="tab"><span>A</span></div><div class="tab"><span>Kala kazoo A Roosky Fantastic</span></div>  
</div>

示例 CSS：

.container {
    border: 1px solid blue;
    white-space: nowrap;
}

.tab {
    display: inline-block;
    border: 1px solid red;
}

.tab span {
    display: inline-block;
    width: 100%;
    min-width: 20px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

JSFiddle：http: //jsfiddle.net/ug3en/

目标浏览器：IE9+、现代 Chrome、现代 Firefox 和现代 Safari。

4

2 回答 2

2

If you add max-width:25% to the .tab class, it will ensure that the tabs don't overflow.

That still doesn't fill out the main bar, though, so I'd suggest you use a media query to target small widths: in small mode remove the .tab span { max-width: 100px } and allow each tab-span to fill out 1/4 of the container.

Try this fiddle.

于 2013-10-10T05:40:34.203 回答
-2

试试下面CSS：

.container {
    border: 1px solid blue;
    white-space: nowrap;
    width:auto;
    position:absolute;
}
于 2013-10-10T05:36:08.790 回答