Добавление элементов по горизонтали в div

В настоящее время я хочу, чтобы верхняя часть моей страницы прокручивалась по переполнению-x, но я не могу этого сделать, потому что всякий раз, когда я добавляю элементы в свой div, что позволяет горизонтальную прокрутку, элементы, которые должны быть невидимый (значение выходит из DIV, горизонтально), он идет в нижней части DIV вместо правой стороны стороны. Вот мой кодДобавление элементов по горизонтали в div

 <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;

источник

2014-12-05 Ziddorino

1 трюк вы можете использовать это, чтобы добавить child div с действительно большой шириной, чтобы содержать все ваши изображения hor а затем ограничить ширину внешнего 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; 
}

источник

2014-12-05 02:14:19 Will

это работает! Благодаря! – Ziddorino

Вы можете использовать атрибут отображения, как этот

.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/

источник

2014-12-05 00:58:49

Я попытался, добавив, что дисплей: встроенный-Flex, но это "гибкий" -es мои изображения внутри, например, если добавить 8 куриных изображений они так сильно изменяются, что все 8 покажут. моя цель состоит в том, чтобы показать как 3 за один раз, после прокрутки влево, это просто покажет следующие. – Ziddorino

м не уверен, правильно ли я вас правильно понимаю, ваши изображения изменены правильно? Я думаю, вам нужно определить вручную изображение ширина, чтобы избежать этого эффекта. –

Я вручную определил ширину и высоту каждого изображения, но inline-flex изменяет их размеры так, чтобы они соответствовали ширине. В любом случае кто-то опубликовал решение ниже. Спасибо тебе еще! – Ziddorino

Добавление элементов по горизонтали в div

ответ

Смежные вопросы