10

我的网站上有一个 div，其中包含一个用作菜单的项目列表。我已经设置了 CSS width:auto，如果菜单项太长，它会重新调整大小。但目前，这将向右扩展，并将我的其余内容也“推”到右侧。

这很难解释，例如，如果您访问http://redsquirrelsoftware.co.uk/并单击“支持”菜单项，您可以看到正在推送的内容。我想要发生的是让 div 扩展到菜单左侧的空白区域。

我目前的 div 的 CSS 是：

.sidebar1 {
    float: left;
    width: auto;
    min-width: 25%;
    max-width: 29%;
    margin-top: 65px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 12px;
}

有没有办法让它以另一种方式扩展？提前致谢。

4

2 回答 2

14

我发现不使用浮点数或绝对定位的另一种方法是direction: rtl在父级上使用，然后在子级上重置它：

.parent { direction: rtl; }
.parent > * { direction: ltr; }
.child { width: 200px; }
.child:hover { width: 400px; }

代码笔：http ://codepen.io/heisters/pen/gMgboJ

（抱歉，我无法将示例建立在 OP 的网站上，因为链接似乎已失效）。

于 2016-06-23T21:37:23.767 回答
3

这个想法需要测试，但它至少在 Chrome 中有效：

  • 将.content和更改.sidebar1为。float: rightfloat: left
  • 在 HTML 中，.sidebar1移到.content.
于 2012-09-26T11:38:14.670 回答