Question

我有四个内联图片，可以扩展我的移动浏览器的宽度。在它们下面，在左边距，我有一个菜单，其中包含每个图像的内部链接。这一切都有效，点击第四个链接会将视口滚动到最右边的图像。

我希望菜单保留在左边距上，但是在左边距之后滚动屏幕。我尝试过的位置：固定和绝对但它不会像使用固定滚动上下一样保持固定。

    <style>
    img {border:blue solid thin; width:100%;  }

    .scroller {display:inline; max-width:180px;  white-space:nowrap; 
    text-align:left; }
    </style>
    </head>
    <body>

    <div style="position:absolute; top:0; left:0;">

    <div class="scroller" style="">
    <div style="display:inline-block; height:300px; border:red solid thin;">
         <img src="car_1.gif" id="1" >
    </div>
    <div style="display:inline-block; height:300px; border:red solid thin;">
        <img src="car_2.gif" id="2">
    </div>
    <div style="display:inline-block; height:300px; border:red solid thin;">
         <img src="car_3.gif" id="3">
    </div>
    </div>

   <div style="position:absolute; top:330px; left:0; padding:20px; 
    border:solid green thin;">
       <a href="#1">one</a>
       <a href="#2">two</a>
       <a href="#3">three</a>
    </div>
    </div>

Answer 1

您可以使用position：fixed或position absolute 然后菜单将是静态的，它不会移动。

overflow-x时需要静态菜单：滚动

1 个答案: