Question

我发现了几个有类似问题的帖子，但都没有针对我的确切问题：

我正在创建一个包含此HTML代码的菜单：

<ul id="menu">
    <li id="item1">Item 1</li>
    <li id="item2" class="active">Item 2</li>
    <li id="item3">Item 3</li>
    <li id="item4">Item 4</li>
</ul>

我想要做的是让.active元素在页面上使用剩余的剩余宽度。我将在每个LI上发出一个click事件来切换活动类。

是否可以仅使用css进行宽度部分？

这是我到目前为止的CSS：

ul#menu
{
   list-style:none;
   background: grey;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 50xp;
}

ul#menu li
{
   float:left;
   height:30px;
   border:1px solid black;
   width: 50px;
}

ul#menu li.active
{
    /* what to put here to make it use rest of widht */
}

以下是jsfiddle： http://jsfiddle.net/GMpeD/

Answer 1

将其设置为表格行，将表格和“活动”单元格的宽度设置为100％，并防止单元格内的换行符。演示：http://jsfiddle.net/yucca42/jyTCw/1/

这不适用于旧版本的IE。要覆盖它们，请使用HTML表格并对其进行相似的设置。

Answer 2

如果您对css3没问题，可以使用 box-flex 属性。

box-flex 属性指定框如何增长以填充包含它的框。

试试这个，

 #menu {
    width: 100%;
    padding: 0;       
    list-style: none;
    display: -moz-box; /* Mozilla */
    -moz-box-orient: horizontal; /* Mozilla */
    display: -webkit-box; /* WebKit */
    -webkit-box-orient: horizontal; /* WebKit */
    display: box;
    box-orient: horizontal;
  }

  .active {
    -moz-box-flex: 1;  /* Mozilla */
    -webkit-box-flex: 1; /* WebKit */
    box-flex: 1;
  }

Answer 3

没有。你必须添加一些JS来监视窗口大小的变化并相应地调整你的元素。

Answer 4

不是在px中给出宽度，而是以百分比形式设置宽度。

所以你可以让非活跃的每个都是10％，而活跃的将是70％的宽度

使div保持宽度

4 个答案: