Question

我不明白为什么我不能让这个工作。我正在制作这个CSS垂直侧面菜单，我希望它位于窗口的右侧。所以我有菜单的div，我将它包装在另一个div中，将其设置为向右浮动。

问题是，它被困在左侧。我希望能够滚动它，但将页面的其余部分保留在同一个地方。这是小提琴： http://jsfiddle.net/xQgSm/121/

这是代码的一部分：

<div id="wrap" style="height: 100%; position: absolute; overflow-y: scroll; float: right">
    <div id='cssmenu'>
    <ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
         <li><a href='#'><span>Product 3</span></a></li>
      </ul>
   </li>

Answer 1

您需要包装器为页面的width: 100%。

尝试添加：

<div id="wrap" style="height: 100%; width: 100%; position: absolute; overflow-y: scroll;">

Answer 2

因为您的元素有position: absolute;，所以正确的方法是设置right属性，例如：

CSS：

#wrap{ right: 0;}

-jsFiddle-

Answer 3

因为#wrap位于绝对位置，所以它会丢失默认的块行为，这意味着它不再是100％-width，而只是与最宽的子节点一样宽。

因此，在您的情况下，您有3种可能性：

松散位置绝对或
位置 #wrap到右或
给它 100％-width ，然后只浮动#cssmenu

Answer 4

我对某些rtl和分配

有同样的问题

width:100%

为我工作。你的代码也是固定的尝试 http://jsfiddle.net/ofdqyy4g/

“float：right”不会将div放在右侧

4 个答案:

-jsFiddle-