Я разрабатываю веб-сайт, и я пытаюсь создать такой макет
Я могу сделать это, используя это
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
Если я удалю это, у него нет горизонтальной полосы прокрутки.
Как я могу достичь этого взгляда без полосы прокрутки.
Я создал скрипку, но у нее нет такой же проблемы.
РЕДАКТИРОВАТЬ
Вот пример, который я загрузил на свой сервер
Я завернул вашу область бара в div (вероятно, должен иметь что-то, чтобы сдержать их все равно), установите максимальную ширину: 100%; переполнение: скрыто; и планшет ушел с функциональностью. Конечно, это не идеальное решение, но у вас есть такие вещи, как margin-left: -100%. лично я бы отказался от сетки, которую вы используете для этой строки, и просто укажите ширину с использованием процентов и используйте медиа-запросы, чтобы скрыть внешние блоки.
добавьте это в элемент оболочки, который имеет полосу прокрутки:
.wrapper { overflow-x: hidden; }
Вы всегда можете отбрасывать элементы с помощью границы в родительский div, чтобы граница и содержимое соответствовали этому полю, а не позволяли им переполняться. Трудно устранять неполадки, так как без скрипки, показывающей панель