Здесь есть над чем поработать.Пройдусь по порядку, как они появятся на вашем изображении.
Выравнивание подчеркивания навигации
Верхняя граница элемента под выбранной навигацией имеет толщину 2 пикселя.Вам нужно подчеркнуть выбранный элемент навигации, чтобы покрыть эту границу.Ваш текущий метод подчеркивания выбранного элемента навигации использует border-bottom, который не может перекрываться так, как вам нужно.Вместо этого используйте псевдоэлемент ::after.
header.main-header .main-navigation ul.nav li.active-nav::after {
content: "";
position: absolute;
width: 100%;
height: 3px; /* same thickness as your original border */
background: #F89106;
bottom: -2px; /* places it exactly over the below element's top border */
left: 0;
}
Отображение как flex
Чтобы отобразить как flex, достаточно просто установить для родительского элемента значение display: flex; и удалить float: left; от своих детей.Вы установили ширину каждого дочернего элемента отдельно, что не обязательно должно меняться, но, как вы сказали выше, лучше позволить flexbox работать с шириной.Я убрал все ширины, что делает ваши панели Search и Dhobi такими же широкими, как и все остальные.
Кроме того, я думаю, вы можете найти min-height лучше, чем height;при использовании height содержимое на панели «Фильтр» переполняется, и поэтому границы панели не расширяются до нижней части страницы.
#content_wrapper_search_etl{
width: 100%;
display: flex; /* key element */
}
.leftside-search-area{ /* no float and no width, same with the other panels */
min-height: 98vh;
border-right: 1px solid #E4E4E4;
}
.center-search-area{
min-height: 98vh;
border-right: 1px solid #E4E4E4;
}
.right-search-area{
min-height: 98vh;
}
Правильное выравнивание границ ввода
Ваш ввод был немного слишком широким с некоторыми интересными параметрами границ, из-за которых он казался не выровненным с остальными вертикальными границами.Сделайте ширину ввода 100% и установите все границы на none, кроме border-bottom.Это также устраняет проблему с переполнением flex.
.right-search-area input,.center-search-area input,.leftside-search-area input{
width: 100%; /* not 101% */
border: none;
border-bottom: 1px solid #E4E4E4; /* set border-bottom only */
height: 25px;
outline: none;
font-family: FontAwesome !important;
}
(в некоторой степени) Отзывчивое переполнение
Чтобы остановить переполнение элементов панели фильтров, вы можете установить свойство min-width.или вы можете сделать это по-флексографски с помощью align-self: flex-start; Однако это может привести к тому, что часть текста вашего ярлыка будет обернута внутри ярлыка.Чтобы исправить это, установите ваши метки 'white-space: nowrap;.Наконец, вам нужно добавить горизонтальный отступ, чтобы немного отвести его от края.
Предложение: вы можете попробовать flex-direction: column; в вашем .box CSS.
Это неРеальная отзывчивость, но она решает проблему переполнения.
.leftside-search-area{
align-self: flex-start; /* keep width to that of its content */
min-height: 98vh;
border-right: 1px solid #E4E4E4;
}
.vertical-box .box{
white-space: nowrap; /* prevent labels wrapping */
display: flex;
padding: 0 10px 0 10px; /* space from horizontal edges */
...
}
Ручка, раздвоенная от вашей, которая реализует все вышеперечисленное, найдена в https://codepen.io/anon/pen/ZMqVVq
Результат:
Надеемся, что это решит все проблемы с отображением.