предотвратить горизонтальную полосу прокрутки от левой и правой границы Div

0

Я разрабатываю веб-сайт, и я пытаюсь создать такой макет

Изображение 174551

Я могу сделать это, используя это

HTML

<body>
    <div class="d3-d4 m1" id="logoHolder">
        <img src="images/payday_logo_long_web.png" alt="Pay Day IRA" />
    </div>
    <div class="d5-d10 m1" id="navHolder">
        <ul id="mainNavigation">
            <li><a href="#">Log In</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Investment</a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
    </div>
    <!--BREAK-->

    <div class="d1-d2 greenSideBar" id="leftGreenSideBar" >

    </div>
    <div class="d3-d6 m1" id="employerButton">
        Employer
    </div>
    <div class="d7-d10 m1" id="employeeButton">
        Employees
    </div>
    <div class="d11-d12 greenSideBar" id="rightGreenSideBar">

    </div>

    <!--BREAK-->


</body>

CSS

/*Green Side Bars*/
.greenSideBar{
    background-color:#6EBE44;
    height:35px;
}
    #rightGreenSideBar{
    border-left-width:5px;
    border-left-style:solid;
    border-left-color:white;
    }

/*Employee/Employer Buttons*/
#employerButton{
    background-color:#6EBE44;
    height:35px;
    border-left-width:5px;
    border-left-style:solid;
    border-left-color:white;
}


#employeeButton{
    background-color:#6EBE44;
    height:35px;
    border-left-width:5px;
    border-left-style:solid;
    border-left-color:white;
}

Единственная проблема заключается в том, что это создает горизонтальную полосу прокрутки. Ive сузило это, чтобы быть причиной

border-left-width:5px;
border-left-style:solid;
border-left-color:white;

сотрудника Button, работодателяButton и rightGreenSideBar

Если я удалю это, у него нет горизонтальной полосы прокрутки.

Как я могу достичь этого взгляда без полосы прокрутки.

Я создал скрипку, но у нее нет такой же проблемы.

скрипка

РЕДАКТИРОВАТЬ

Вот пример, который я загрузил на свой сервер

пример

  • 0
    так где же полоса прокрутки в вашем примере?
  • 0
    пример добавлен. см выше
Показать ещё 4 комментария
Теги:

3 ответа

0

Я завернул вашу область бара в div (вероятно, должен иметь что-то, чтобы сдержать их все равно), установите максимальную ширину: 100%; переполнение: скрыто; и планшет ушел с функциональностью. Конечно, это не идеальное решение, но у вас есть такие вещи, как margin-left: -100%. лично я бы отказался от сетки, которую вы используете для этой строки, и просто укажите ширину с использованием процентов и используйте медиа-запросы, чтобы скрыть внешние блоки.

Поделиться
0

добавьте это в элемент оболочки, который имеет полосу прокрутки:

.wrapper { overflow-x: hidden; }
Поделиться
  • 0
    Это работает, но я чувствую, что это не лучшее решение. Я не знаю, что заставляет полосу прокрутки быть там во-первых. Границы на div создают дополнение?
  • 0
    Нет, это не элегантное решение, я согласен. Реальная ширина элемента - это сумма его ширины, отступа и границы.
0

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

Поделиться
  • 0
    Я загрузил на сервер. сообщение обновлено

Ещё вопросы

Сообщество Overcoder
Наверх
Меню