Как включить горизонтальную прокрутку на странице html - PullRequest
Новая
       0

Как включить горизонтальную прокрутку на странице html

1 голос
/ 02 апреля 2020

Я попытался включить горизонтальную прокрутку, но не смог. Перепробовал слишком много комбинаций, но он все еще не прокручивается.

Вы можете увидеть мою страницу ниже: enter image description here

Я хочу начать прокрутку после поля 10.

Вы можете найти мою html страницу ниже: 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        body {
            overflow:auto;
            /*width: 120%;*/
        }

        div.columnTitle {
            /*font-size: 15px;
            font-family: 'SegoeUI', 'Segoe UI';
            font-weight: bold;*/
            font: normal normal normal 15px / 20px 'SegoeUI', 'Segoe UI';
            text-align: left;
            /*float: left;*/
            width: 8%;
            display: table-cell;
            color: #045999;
            text-align: center;
            border-left: 2px solid #ccc;
            line-height: 20px;
            vertical-align: middle;
        }


        div.filterDate > select {
            webkit-appearance: menulist-button;
            height: 40px;
            /*border: none;*/
            float: left;
            width: 17%;
        }

        div.data {
            float: left;
            width: 6.7%;
            font-size: 14px;
            font-family: "Segoe UI Regular", SegoeUI, "Segoe UI";
            color: rgb(49, 95, 162);
            text-align: center;
            display: inline-block;
        }

        div.l2name {
            width: 16%;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            color: #315fa2;
            border-left: solid;
            text-align: left;
            font-size: 16px;
        }

        div.l3name {
            width: 15%;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            color: #315fa2;
            margin-left: 1%;
            border-left: solid;
            text-align: left;
            font-size: 16px;
        }

        div.l4name {
            width: 14%;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            color: #315fa2;
            margin-left: 2%;
            border-left: solid;
            text-align: left;
            font-size: 16px;
        }

        div.l5name {
            width: 13%;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            color: #315fa2;
            margin-left: 3%;
            border-left: solid;
            text-align: left;
            font-size: 16px;
        }

        div.l6name {
            width: 14%;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            color: #315fa2;
            margin-left: 3%;
            border-left: solid;
            text-align: left;
            font-size: 16px;
        }

        div.row {
            width: 100%;
            float: left;
            margin-top: 0.5%;
            line-height: 250%;
        }

        div.pages {
            margin: 1% 1% 0px 0px;
            float: right;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
        }
        /*div.content {
            margin-top:5%;
        }*/

        .content > div:nth-of-type(odd) {
            background: #e0e0e0;
        }
        /*.content > div:nth-of-type(odd):hover {
            background: black;
        }*/

        row:only-child {
            background-color: red;
        }

        button {
            background-color: rgb(47, 95, 144);
            border: none;
            color: white;
            padding: 10px 32px;
            text-align: center;
            font-size: 16px;
            margin: 0px;
            opacity: 0.6;
            transition: 0.3s;
            display: inline-block;
            text-decoration: none;
            cursor: pointer;
            float: left;
        }

            button:hover {
                opacity: 1
            }

        div.pagination {
            display: inline-block;
            float: right;
            position: fixed;
            right: 0;
            bottom: 0;
            margin-top: 5%;
            font: normal normal normal 15px / 20px 'SegoeUI', 'Segoe UI';
        }

            div.pagination > .pagingLink {
                color: black;
                float: left;
                padding: 8px 16px;
                text-decoration: none;
                transition: background-color .3s;
            }

                div.pagination > .pagingLink.active {
                    background-color: rgb(47, 95, 144);
                    color: white;
                }

                div.pagination > .pagingLink:hover:not(.active) {
                    background-color: #ddd;
                    cursor: pointer;
                }

        .data > a {
            background-color: rgb(47, 95, 144);
            color: white;
            /*padding: 1em 1.5em;*/
            /*padding: 15px,15px;*/
            text-decoration: none;
            text-transform: uppercase;
        }

            .data > a:hover {
                background-color: #555;
            }

            .data > a:active {
                background-color: black;
            }

            .data > a:visited {
                background-color: #ccc;
            }

        div.nodata {
            background-color: white !important;
            color: rgb(102, 102, 102);
            font-size: 16px;
            text-align: center;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            line-height: 200px;
            /*height: auto;
            vertical-align: middle;
            text-align: center;
            width: 100%;
            position: absolute;
            align-items: center;
            justify-content: center;
            flex-direction: column;*/
        }
    </style>

   
</head>

<body>

    <div class="header">



        <div class="filterDate">
            <select>
                <option value="operator='this-year'">Current Year</option>
                <option value="operator='LastYear'">Year - 1</option>
                <option value="operator='last-x-months' value='12'">12 Months</option>
            </select>
        </div>
        <div class="columnTitle">
            Field1
        </div>

        <div class="columnTitle">
            Field2

        </div>
        <div class="columnTitle">
            Field3

        </div>
        <div class="columnTitle">
            Field4

        </div>
        <div class="columnTitle">
            Field5
        </div>
        <div class="columnTitle">
            Field6

        </div>
        <div class="columnTitle">
            Field7

        </div>
        <div class="columnTitle">
            Field8

        </div>
        <div class="columnTitle">
            Field9

        </div>
        <div class="columnTitle">
            Field10

        </div>
        <div class="columnTitle">
            Field11

        </div>
        <div class="columnTitle">
            Field12

        </div>
        <div class="columnTitle">
            Field13

        </div>
        <div class="columnTitle">
            Field14

        </div>
        <div class="columnTitle">
            Field15

        </div>
        <div class="columnTitle">
            Field15

        </div>
        <div class="columnTitle">
            Field15

        </div>
        <div class="columnTitle">
            Field15

        </div>
    </div>
    <div class="content">

    </div>


</body>
</html>

Также я прочитал слишком много статей об этом, но не смог найти правильный способ сделать это.

Спасибо

Ответы [ 3 ]

0 голосов
/ 02 апреля 2020

Вам нужно установить width (согласно вашему требованию), а затем поместить scroll. 

body {
  /*width: 120%;*/
}

.header {
  width:430px; /* increase or decrease the width as per you requirement */
  overflow-x: auto; /* automatic scroll post 430px which is assigned above.*/
}

.columnTitle {
  /*font-size: 15px;
            font-family: 'SegoeUI', 'Segoe UI';
            font-weight: bold;*/
  font: normal normal normal 15px / 20px 'SegoeUI', 'Segoe UI';
  text-align: left;
  /*float: left;*/
  width: 8%;
  display: table-cell;
  color: #045999;
  text-align: center;
  border-left: 2px solid #ccc;
  line-height: 20px;
  vertical-align: middle;
}

div.filterDate>select {
  webkit-appearance: menulist-button;
  height: 40px;
  /*border: none;*/
  float: left;
  width: 17%;
}

div.data {
  float: left;
  width: 6.7%;
  font-size: 14px;
  font-family: "Segoe UI Regular", SegoeUI, "Segoe UI";
  color: rgb(49, 95, 162);
  text-align: center;
  display: inline-block;
}

div.l2name {
  width: 16%;
  font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
  color: #315fa2;
  border-left: solid;
  text-align: left;
  font-size: 16px;
}

div.l3name {
  width: 15%;
  font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
  color: #315fa2;
  margin-left: 1%;
  border-left: solid;
  text-align: left;
  font-size: 16px;
}

div.l4name {
  width: 14%;
  font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
  color: #315fa2;
  margin-left: 2%;
  border-left: solid;
  text-align: left;
  font-size: 16px;
}

div.l5name {
  width: 13%;
  font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
  color: #315fa2;
  margin-left: 3%;
  border-left: solid;
  text-align: left;
  font-size: 16px;
}

div.l6name {
  width: 14%;
  font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
  color: #315fa2;
  margin-left: 3%;
  border-left: solid;
  text-align: left;
  font-size: 16px;
}

div.row {
  width: 100%;
  float: left;
  margin-top: 0.5%;
  line-height: 250%;
}

div.pages {
  margin: 1% 1% 0px 0px;
  float: right;
  font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
}


/*div.content {
            margin-top:5%;
        }*/

.content>div:nth-of-type(odd) {
  background: #e0e0e0;
}


/*.content > div:nth-of-type(odd):hover {
            background: black;
        }*/

row:only-child {
  background-color: red;
}

button {
  background-color: rgb(47, 95, 144);
  border: none;
  color: white;
  padding: 10px 32px;
  text-align: center;
  font-size: 16px;
  margin: 0px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  float: left;
}

button:hover {
  opacity: 1
}

div.pagination {
  display: inline-block;
  float: right;
  position: fixed;
  right: 0;
  bottom: 0;
  margin-top: 5%;
  font: normal normal normal 15px / 20px 'SegoeUI', 'Segoe UI';
}

div.pagination>.pagingLink {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

div.pagination>.pagingLink.active {
  background-color: rgb(47, 95, 144);
  color: white;
}

div.pagination>.pagingLink:hover:not(.active) {
  background-color: #ddd;
  cursor: pointer;
}

.data>a {
  background-color: rgb(47, 95, 144);
  color: white;
  /*padding: 1em 1.5em;*/
  /*padding: 15px,15px;*/
  text-decoration: none;
  text-transform: uppercase;
}

.data>a:hover {
  background-color: #555;
}

.data>a:active {
  background-color: black;
}

.data>a:visited {
  background-color: #ccc;
}

div.nodata {
  background-color: white !important;
  color: rgb(102, 102, 102);
  font-size: 16px;
  text-align: center;
  font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 200px;
  /*height: auto;
            vertical-align: middle;
            text-align: center;
            width: 100%;
            position: absolute;
            align-items: center;
            justify-content: center;
            flex-direction: column;*/
}
<body>
  <div class="header">
    <div class="filterDate">
      <select>
        <option value="operator='this-year'">Current Year</option>
        <option value="operator='LastYear'">Year - 1</option>
        <option value="operator='last-x-months' value='12'">12 Months</option>
      </select>
    </div>
    <div class="columnTitle">Field1</div>

    <div class="columnTitle">
      Field2

    </div>
    <div class="columnTitle">
      Field3

    </div>
    <div class="columnTitle">
      Field4

    </div>
    <div class="columnTitle">
      Field5
    </div>
    <div class="columnTitle">
      Field6

    </div>
    <div class="columnTitle">
      Field7

    </div>
    <div class="columnTitle">
      Field8

    </div>
    <div class="columnTitle">
      Field9

    </div>
    <div class="columnTitle">
      Field10

    </div>
    <div class="columnTitle">
      Field11

    </div>
    <div class="columnTitle">
      Field12

    </div>
    <div class="columnTitle">
      Field13

    </div>
    <div class="columnTitle">
      Field14

    </div>
    <div class="columnTitle">
      Field15

    </div>
    <div class="columnTitle">
      Field15

    </div>
    <div class="columnTitle">
      Field15

    </div>
    <div class="columnTitle">
      Field15

    </div>
  </div>
  <div class="content">

  </div>


</body>
0 голосов
/ 02 апреля 2020

У меня есть простое решение для этого.

Поместите дополнительный тег стиля с инкрементным значением переменной, как показано ниже, в ваши div теги с columnTitle классом: 

<div class="columnTitle" style="--i: 0;">Field1</div>
<div class="columnTitle" style="--i: 1;">Field2</div>
<div class="columnTitle" style="--i: 2;">Field3</div>
<div class="columnTitle" style="--i: 3;">Field4</div>
<div class="columnTitle" style="--i: 4;">Field5</div>
...

И добавьте эти 3 дополнительные строки CSS в ваш div.columnTitle селектор 

div.columnTitle
{
    position: absolute;
    top: 0px;
    left: calc(var(--i)*8% + 17%);
}

Это решит вашу проблему. Я разместил этот ответ, предполагая, что каждый div с columnTitle классом будет иметь одинаковую ширину. Надеюсь, это поможет.

Спасибо.

Вот полный фрагмент кода, основанный на комбинации ваших кодов и моих предложений: 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        body {
            overflow:auto;
            /*width: 120%;*/
        }

        div.columnTitle {
            position: absolute;
            top: 0px;
            left: calc(var(--i)*8% + 17%);
            /*font-size: 15px;
            font-family: 'SegoeUI', 'Segoe UI';
            font-weight: bold;*/
            font: normal normal normal 15px / 20px 'SegoeUI', 'Segoe UI';
            text-align: left;
            /*float: left;*/
            width: 8%;
            display: table-cell;
            color: #045999;
            text-align: center;
            border-left: 2px solid #ccc;
            line-height: 20px;
            vertical-align: middle;
        }


        div.filterDate > select {
            webkit-appearance: menulist-button;
            height: 40px;
            /*border: none;*/
            float: left;
            width: 17%;
        }

        div.data {
            float: left;
            width: 6.7%;
            font-size: 14px;
            font-family: "Segoe UI Regular", SegoeUI, "Segoe UI";
            color: rgb(49, 95, 162);
            text-align: center;
            display: inline-block;
        }

        div.l2name {
            width: 16%;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            color: #315fa2;
            border-left: solid;
            text-align: left;
            font-size: 16px;
        }

        div.l3name {
            width: 15%;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            color: #315fa2;
            margin-left: 1%;
            border-left: solid;
            text-align: left;
            font-size: 16px;
        }

        div.l4name {
            width: 14%;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            color: #315fa2;
            margin-left: 2%;
            border-left: solid;
            text-align: left;
            font-size: 16px;
        }

        div.l5name {
            width: 13%;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            color: #315fa2;
            margin-left: 3%;
            border-left: solid;
            text-align: left;
            font-size: 16px;
        }

        div.l6name {
            width: 14%;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            color: #315fa2;
            margin-left: 3%;
            border-left: solid;
            text-align: left;
            font-size: 16px;
        }

        div.row {
            width: 100%;
            float: left;
            margin-top: 0.5%;
            line-height: 250%;
        }

        div.pages {
            margin: 1% 1% 0px 0px;
            float: right;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
        }
        /*div.content {
            margin-top:5%;
        }*/

        .content > div:nth-of-type(odd) {
            background: #e0e0e0;
        }
        /*.content > div:nth-of-type(odd):hover {
            background: black;
        }*/

        row:only-child {
            background-color: red;
        }

        button {
            background-color: rgb(47, 95, 144);
            border: none;
            color: white;
            padding: 10px 32px;
            text-align: center;
            font-size: 16px;
            margin: 0px;
            opacity: 0.6;
            transition: 0.3s;
            display: inline-block;
            text-decoration: none;
            cursor: pointer;
            float: left;
        }

            button:hover {
                opacity: 1
            }

        div.pagination {
            display: inline-block;
            float: right;
            position: fixed;
            right: 0;
            bottom: 0;
            margin-top: 5%;
            font: normal normal normal 15px / 20px 'SegoeUI', 'Segoe UI';
        }

            div.pagination > .pagingLink {
                color: black;
                float: left;
                padding: 8px 16px;
                text-decoration: none;
                transition: background-color .3s;
            }

                div.pagination > .pagingLink.active {
                    background-color: rgb(47, 95, 144);
                    color: white;
                }

                div.pagination > .pagingLink:hover:not(.active) {
                    background-color: #ddd;
                    cursor: pointer;
                }

        .data > a {
            background-color: rgb(47, 95, 144);
            color: white;
            /*padding: 1em 1.5em;*/
            /*padding: 15px,15px;*/
            text-decoration: none;
            text-transform: uppercase;
        }

            .data > a:hover {
                background-color: #555;
            }

            .data > a:active {
                background-color: black;
            }

            .data > a:visited {
                background-color: #ccc;
            }

        div.nodata {
            background-color: white !important;
            color: rgb(102, 102, 102);
            font-size: 16px;
            text-align: center;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            line-height: 200px;
            /*height: auto;
            vertical-align: middle;
            text-align: center;
            width: 100%;
            position: absolute;
            align-items: center;
            justify-content: center;
            flex-direction: column;*/
        }
    </style>

   
</head>

<body>

    <div class="header">



        <div class="filterDate">
            <select>
                <option value="operator='this-year'">Current Year</option>
                <option value="operator='LastYear'">Year - 1</option>
                <option value="operator='last-x-months' value='12'">12 Months</option>
            </select>
        </div>
        <div class="columnTitle" style="--i: 0">
            Field1
        </div>

        <div class="columnTitle" style="--i: 1">
            Field2

        </div>
        <div class="columnTitle" style="--i: 2">
            Field3

        </div>
        <div class="columnTitle" style="--i: 3">
            Field4

        </div>
        <div class="columnTitle" style="--i: 4">
            Field5
        </div>
        <div class="columnTitle" style="--i: 5">
            Field6

        </div>
        <div class="columnTitle" style="--i: 6">
            Field7

        </div>
        <div class="columnTitle" style="--i: 7">
            Field8

        </div>
        <div class="columnTitle" style="--i: 8">
            Field9

        </div>
        <div class="columnTitle" style="--i: 9">
            Field10

        </div>
        <div class="columnTitle" style="--i: 10">
            Field11

        </div>
        <div class="columnTitle" style="--i: 11">
            Field12

        </div>
        <div class="columnTitle" style="--i: 12">
            Field13

        </div>
        <div class="columnTitle" style="--i: 13">
            Field14

        </div>
        <div class="columnTitle" style="--i: 14">
            Field15

        </div>
        <div class="columnTitle" style="--i: 15">
            Field15

        </div>
        <div class="columnTitle" style="--i: 16">
            Field15

        </div>
        <div class="columnTitle" style="--i: 17">
            Field15

        </div>
    </div>
    <div class="content">

    </div>


</body>
</html>
0 голосов
/ 02 апреля 2020

Замените свой список на Bootstrap таблиц, и вы можете go.

введите описание ссылки здесь

В области "th" вы можете добавьте столько, сколько вы хотите, и тогда вы получите горизонтальную прокрутку, вы также можете добавить свой собственный визуал на ваши таблицы, чтобы соответствовать вашему изображению, как показано здесь. 

<th scope="col">#</th>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...