我的网站上有一个 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;
}
有没有办法让它向另一边扩展? 提前致谢。
最佳答案
我发现另一种不使用 float 或绝对定位的方法是在父级上使用 direction: rtl
,然后在子级上重置它:
.parent { direction: rtl; }
.parent > * { direction: ltr; }
.child { width: 200px; }
.child:hover { width: 400px; }
码笔:http://codepen.io/heisters/pen/gMgboJ
(抱歉,我无法将示例基于 OP 的网站,因为链接似乎已失效)。
关于css - 使div自动向左而不是向右扩展宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12600743/