Question

目前我希望我的页面的上半部分在overflow-x上滚动，但我不能这样做，因为每当我向div添加允许水平滚动的元素时，应该看不见的元素（意思是不在div，水平），它位于div的底部而不是rigth侧。这是我的代码

     <div class="headmenu">
        <a class="ui circular image border1px margin33 foodicon heightwidth"> <img src="../css/images/chicken.png" class="heightwidth"> </a>
        <a class="ui circular image border1px margin33 foodicon heightwidth"> <img src="../css/images/chicken.png" class="heightwidth"> </a>
        <a class="ui circular image border1px margin33 foodicon heightwidth"> <img src="../css/images/chicken.png" class="heightwidth"> </a>
        <a class="ui circular image border1px margin33 foodicon heightwidth"> <img src="../css/images/chicken.png" class="heightwidth"> </a>
        <a class="ui circular image border1px margin33 foodicon heightwidth"> <img src="../css/images/chicken.png" class="heightwidth"> </a>
        <a class="ui circular image border1px margin33 foodicon heightwidth"> <img src="../css/images/chicken.png" class="heightwidth"> </a>
    </div>

这是我的css

  .headmenu
     {
       position:fixed;
    width:100%;
    height: 80px;
    top:0px;
    left:0px;
    width:100%;

    text-align:left;
    font-size:25px;
    background-color:#A6C462;
    vertical-align:text-bottom;
    z-index:15;

    overflow-x:scroll;
    overflow-y:hidden;

Answer 1

你可以使用像这样的显示属性

.headmenu {
    position:fixed;
    width:100%;
    height: 80px;
    top:0px;
    left:0px;
    width:100%;

    text-align:left;
    font-size:25px;
    background-color:#A6C462;
    vertical-align:text-bottom;
    z-index:15;

    display: inline-flex;

    overflow-x:scroll;
    overflow-y:hidden;
}

http://jsfiddle.net/6jnc78z6/

Answer 2

您可以使用的一个技巧是添加一个宽度非常大的子div来水平包含所有图像，然后限制最外层div的宽度。

http://jsfiddle.net/biz79/6jnc78z6/1/

HTML：

<div class="headmenu">
    <div class="container">
        <a class="ui circular image border1px margin33 foodicon heightwidth">
            <img src="https://dl.dropboxusercontent.com/u/2542034/colorPicks/a400.png" class="heightwidth">
        </a>
...
    </div>
</div>

CSS：

.headmenu {
    width:100%;
    height:100px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.container {
    width:2500px;
}

将元素水平添加到div

2 个答案: