0

我正在尝试制作一个具有静态高度和可变宽度的 div。带有多个水平选项卡。活动选项卡应水平拉伸以填充容器，非活动选项卡应缩小到其非活动大小（在本例中为 24 像素）。

我不能让它工作。标签伸展，但太多了。它将标签后面的标签撞到下一行，这不应该发生。我不知道如何使这项工作像我想要的那样。

我正在尝试做的可以在 [链接已删除] 中看到

我确信有办法做到这一点，就像我以前见过的那样，但我找不到它的例子。知道我做错了什么吗？

4

5 回答 5

2

您在寻找水平手风琴吗？

网上有几个例子。如果您希望打开的选项卡占用容器的所有空间减去选项卡的宽度，最好依靠 Javascript 进行计算。

于 2010-07-22T20:48:37.000 回答
0 
<style>
#navigation
{
   border: 1px solid #000000;
   height: 400px;
   margin: 10px 25px;
   padding: 0px;
   width: auto;
}
.item
{
   display: block;
   float: left;
   height: 100%;
   margin: 0px;
   overflow: hidden;
}
.item img { float: left; margin-right: 5px;}
.closed
{
   width: 10%;
}
.open
{
   width: 80%;
}

</style>

</head>

   <body>
      <div id="navigation">
         <div class="item open">
            <img src="hometab.png" alt="Home" />

            Open Tab Open Tab
         </div>
         <div class="item closed">
            <img src="hometab.png" alt="Home" />
            Open Tab Open Tab
         </div>
         <div class="item closed">
            <img src="hometab.png" alt="Home" />
            Open Tab Open Tab
         </div>

      </div>
于 2010-07-22T20:35:40.537 回答
0

你对width:auto上的承诺如何#navigation？

如果将宽度设置#navigation为固定值并设置适当的宽度值，.open那么它看起来相当不错。

当我在FireBug中使用您的示例时，我使用了 400 for#navigation和 350 for .open，它似乎运行良好。

于 2010-07-22T20:52:48.687 回答
0

额外的项目可能会被撞到下一行，因为您打开的标签的宽度是 100% - 尝试将其设置为 80% 或 90%，以便为之后的额外“标签”留出空间。“关闭”的选项卡可能还应该有一个百分比宽度，它们应该加在一起等于 100%——它们容器的全宽。

于 2010-07-22T20:56:34.920 回答
0

以下方法对我有用：

让“w”为 div 的原始宽度，您希望将其拉伸“x”像素。在其上添加以下 CSS：

{
    width: (w + x) px;
    margin-left: -x/2 px
}

例如，如果原始宽度为 300 像素，并且您想将其拉伸 50 像素，则附加 CSS 将是：

{
    width: 350px;
    margin-left: -25px
}
于 2016-02-12T06:46:18.587 回答