Placing scroll horizontally

Question

Placing scroll horizontally

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I wanted to put a scroll horizontally, so it can be accessed on mobile screens. How do I do this?

.menu_topo_geral {
    width: 100%;
    height: 50px;
    background: #616161;
}
.menu_topo_geral div {
    cursor: pointer;
    text-align:center;
    line-height:50px;
    float: left;
    border: 0 solid #484848;
    border-right-width: 1px;
    color:#FFFFFF;
    padding: 0 10px 0 10px;
}
.menu_topo_geral div:hover {
    background: #484848;
}
.menu_topo_geral div:active {
    background: #323232;
}

<div class='menu_topo_geral'>
            <div class='bg-grey-2'>MENU 1</div>
            <div>MENU 2</div>
            <div>MENU 3</div>
            <div>MENU 4</div>
            <div>MENU 5</div>
            <div>MENU 6</div>
            <div>MENU 7</div>
            <div>MENU 8</div>
            <div>MENU 9</div>
            <div>MENU 10</div>
            <div>MENU 11</div>
            <div>MENU 12</div>
        </div>

html css

asked by anonymous 22.12.2016 / 20:40

2 answers

2

To enable horizontal scrolling, you can use overflow-x in class of the element that can be expanded (example to menu_topo_geral ):

.menu_topo_geral {
    overflow-x: visible;
}

JSFiddle : link

22.12.2016 / 20:43

Multiple lines in a ShowMessage in Delphi Possibility to view doc, docx in browser

score 3 · Accepted Answer

So?

One tip is to put the calc function in width of class content-menu :

width: calc(85px * 12);

You have to roughly calculate the size of each MENU item and do a basic multiplication to set the size of content-menu . Hence it will not have spaces left in the end.

Manjou?

.menu_topo_geral {
  width: 100%;
  height: 50px;
  cursor: pointer;
  text-align: center;
}
.content-menu {
  width: calc(85px * 12);
  background: #616161;
  display: table;
}
.menu_topo_geral .content-menu div {
  line-height: 50px;
  float: left;
  border: 0 solid #484848;
  border-right-width: 1px;
  color: #FFFFFF;
  padding: 0 10px 0 10px;
}

<div class='menu_topo_geral'>
  <div class="content-menu">
    <div>MENU 1</div>
    <div>MENU 2</div>
    <div>MENU 3</div>
    <div>MENU 4</div>
    <div>MENU 5</div>
    <div>MENU 6</div>
    <div>MENU 7</div>
    <div>MENU 8</div>
    <div>MENU 9</div>
    <div>MENU 10</div>
    <div>MENU 11</div>
    <div>MENU 12</div>
  </div>
</div>