3

我正在尝试用 css 找出某种布局。

[..tab1 随机文本..][..tab2 更多随机文本..][..tab3 其他随机文本..][..tab4..][..tab5..]

这些是要求：

  • 所有选项卡都在一个固定宽度的 div 内。
  • 选项卡不应在该 div 上展开，而应将其填满。
  • 选项卡的数量可能会有所不同。
  • 每个选项卡的宽度未知（取决于里面的文本）。
  • 所有选项卡应该共享相同的填充（从最外层字母到选项卡内边框的空间应该相同，由上面的“..”表示）。此填充不必固定，但在选项卡之间应该相同。
  • 没有计算。如果添加或删除一个或多个选项卡，所有这些都应该在不修改 css 的情况下工作。

我用桌子试了一下：

<table>
    <tr>
        <td>Tab1</td>
        <td>Tab 1 Space</td>
        <td>Tab 2 more Space</td>
        <td>Tab 3 even more Space</td>
        <td>Tab 4</td>
    </tr>
</table>

（小提琴）

我面临的问题是，填充根据表格的宽度和选项卡的数量而变化。

4

7 回答 7

5

table如果我正确理解了所有约束，则可以使用和table-celldisplay 属性轻松完成。

设置包含的 div 宽度：

.container {
width: 800px;
}

然后将您的 ul 设置为显示表格：

ul {
display: table;
width: 100%;
}

最后，将您的 li 设置为表格单元格：

li {
display: table-cell;
}

查看完整示例：http ://codepen.io/anon/pen/IfbHs

于 2013-11-13T19:42:52.610 回答
3

删除表格的宽度，这将是完美的

http://jsfiddle.net/SSq7A/2/

table {
    border-spacing: 1px;
}

td {
    padding:10px;
    background: #40404c;
    text-align: center;
    color: white;
    font-size: 11px;
}
于 2013-11-07T10:35:58.290 回答
2

在给定约束条件下使用纯 CSS 是不可能的

由于您的约束，您所要求的似乎在大多数情况下仅使用 css 在数学上是不可能的（文本长度相同除外）。

考虑一个只有两个选项卡的示例以及您的以下四个特定（且相互冲突的）要求（假设500px固定宽度的容器；要求已重新排序以进行说明）：

(1)每个 Tab 的宽度未知（取决于里面的文字）。

假设 Tab2 的文本长度是 Tab1 的两倍。所以为了说明，Tab1 = 10px，Tab2 = 20px，然后......

(2)所有的 Tabs 应该共享相同的 padding（从最外层的字母到 tab 的内边框的间距应该相同，用上面的“..”表示）。此填充不必固定，但在选项卡之间应该相同。

和...

(3)没有计算。如果添加或删除一个或多个选项卡，所有这些都应该在不修改 css 的情况下工作。

不言自明，但是...

(4)选项卡不应在该 div 上展开，而应将其填满。

这意味着以下之一：

A.每个 Tab 将是宽度的 50%，文本宽度保持不变，因此 Tab1 = 120px 10px 120px，Tab2 =115px 20px 115px不符合 (1) 因为两者的整体大小将是相同的宽度，或者 (2) 因为填充将在根据插图的宽度，但可能满足（3）和（4）。这不是你想要的。

B.每个 Tab 将是宽度的 50%，但对于 Tab1 ，文本宽度必须拉伸或压缩Tab2 以使文本宽度相等。这在技术上仍然无法满足（1），但确实满足（2）和（4），因为两者都设置为120px 10px 120pxor 115px 20px 115px，因为文本以某种方式被扭曲以“适应”空间。如果不做 (3) 这是否可能是有问题的，但可能无关紧要，因为我确信这不是你想要的。

C.每个选项卡都将按照您对 (1) 和 (2) 的需要进行设置，其中 (2) 设置为某个固定量（例如 10 像素），这会在选项卡之间或周围留下间隙，例如10px 10px 10px、 的间隙430px，然后10px 20px 10px。这可能会满足（3），但不满足（4），因为它们不会真正“填充”固定容器的空间——某处会出现“间隙”。这不是你想要的。

D.您最终声明您想要的是每个 Tab 的填充设置为相等，这可以针对 (1) 和 (2) 完成，但不能通过您的约束 (3) 完成，因为需要计算。在示例中，它是(500px - 30px) / 4 = 117.5px。这使得选项卡117.5px 10px 117.5px和117.5px 20px 117.5px. 但是正如你所看到的，由于文本是灵活的宽度，这必须动态完成，大致使用公式：

(containerWidth - totalTextWidths) / (2 x numTabs) = padding

如果您想要选项卡之间的某种类型的小间隙，则需要将其添加到公式中（这里假设间隙为 2px，因此gapWidths = ((numTabs - 1) x 2px)）：

(containerWidth - totalTextWidths - gapWidths) / (2 x numTabs) = padding

因此，您提供的约束使解决方案变得不可能——要么必须允许计算，要么您需要重新考虑您希望标签如何显示。

于 2013-11-11T02:11:40.037 回答
1

这基本上是不可能的，你可以单独使用 CSS 最好的设置是你可以添加 X 数量的选项卡，但必须手动计算选项卡的宽度，以便填充容器，例如 4选项卡你会做这样的事情（注意 .Tab 类的宽度是 25% 即 100/4）：

                <div id="TabsContainer">
                    <div class="Tab">
                        <div class="TabContainer">Tab 1</div>
                    </div>
                    <div class="Tab">
                        <div class="TabContainer">Tab 2</div>
                    </div>
                    <div class="Tab">
                        <div class="TabContainer">Tab 3</div>
                    </div>
                    <div class="Tab">
                        <div class="TabContainer">Tab 4</div>
                    </div>
                </div>

CSS 将是：

#TabsContainer {
    font-size: 0;
    white-space: nowrap;
}
.Tab {
    display: inline-block;
    *zoom: 1;
    *display: inline;

    width: 25%;
}
.TabContainer {
    background: #f00;
    font-size: 12px;
    border-left: 1px solid #000;
    padding: 10px;
}

真正的问题是第二点是您需要标签以相等的方式填充容器宽度，如果您查看 W3C 对 width 属性的建议，您会发现没有像“填充”这样的值

http://www.w3.org/TR/CSS2/visudet.html#the-width-property

基本上，您需要根据容器元素或设置宽度设置百分比宽度，没有真正的替代品（auto 确实不能满足您的需求，它只是默认值，并且您知道 DIV 默认情况下不会那样做）。

如果你真的需要这种行为，那么你应该考虑使用表格，因为表格可以保持容器宽度，然后你可以添加 X 数量的单元格，你会得到你需要的东西，但至少对于现在，使用 DIV 单独使用 CSS 是不可能的。

于 2013-11-15T16:17:12.607 回答
1

我有一种感觉，这并不是您真正想要的，但它确实解决了以下问题：

  1. 一致的填充
  2. 元素填充元素
  3. 没有计算

HTML

<div class="tab-container">
    <ul class="tabs">
        <li>Tab1</li>
        <li>Tab 1 Space</li>
        <li>Tab 2 more Space</li>
        <li>Tab 3 even more Space</li>
        <li>Tab 4</li>
    </ul>
</div>

CSS

body {
    background: black;
}
.tab-container {
    display: block;
    width: 500px;
}
.tabs {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    width: 100%;
    margin: 0;
    padding: 0;
}
.tabs > li {
    display: block;
    padding: 5px;
    background: #40404c;
    text-align: center;
    white-space: nowrap;
    color: white;
    font-size: 11px;
}

这是小提琴。

该解决方案基于这样的假设，即元素之间可以有空间，因为您没有提到这样的条件。

有了这个解决方案，我向你提出了一个问题——浏览器对 flexbox 的支持。

弹性盒信息

您可以阅读以下内容flexbox：

于 2013-11-14T11:36:09.173 回答
1

你在找这样的东西吗？=> http://jsfiddle.net/sijav/SSq7A/12/ 我添加了一个width:1%; ，整个是：

td {
    padding: 5px 0;
    background: #40404c;
    text-align: center;
    color: white;
    font-size: 11px;
    width:1%;
}

还在表格中添加了一个 div 来设置整个宽度（整个标签容器）
http://jsfiddle.net/sijav/SSq7A/14/

于 2013-11-11T05:16:09.670 回答
0

如果你想走那条路，你可以在这里使用 flexbox。

.container {
width: 800px;
}

ul {
display: flex;
width: 100%;
}

li {
flex:auto;
}

查看完整示例：http ://codepen.io/anon/pen/rkqtD

不过，最终，就像其他示例一样，您必须在一致的填充和添加无限项的能力之间做出权衡。

于 2013-11-17T13:05:45.543 回答