Yaxoo
@Yaxoo
То тут, то там.

Горизонтальная черта-разделитель до и после меню?

Добрый день.

Подскажите, как лучше реализовать следующую вещь:
Full-width шаблон делаю, внутри него есть она контента 1024px. Внутри этой зоны контента есть меню горизонтальное.
Задача: до и после меню сделать горизонтальную линию-разделитель. Важно то, что эта линия должна также идти и на full-width части.
Рисунок:
4c3094b430a343e68572a25d03d88a3d.png
  • Вопрос задан
  • 300 просмотров
Решения вопроса 2
LenovoId
@LenovoId
I want, women not to get sick
codepen на совсем маленьких экранах не будет видно , стили надо переписать чуток
Ответ написан
trushka
@trushka
Вот так можно сделать. Но чтоб оно выходило за границы видимого блока и растягивалось на всю ширину, можно конечно всякие пляски с бубном отрицательными маргинами и calc() устроить, а можно апрсто перед блоком с контентом ставить, а не внутрь
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@lionkka
Сделать псевдоклассы before и after
content: '';
    display: block;
    height: 1px;
    position: relative;
    width: 70%;
    max-width: 300px;
    left: 0;
    top: 20px;
    background: #d7d7d7;

как пример. Скопировала из своего проекта
Ответ написан
@Mauster
К примеру у Вас есть меню HTML
<nav class="main-menu">
    <ul>
           <li>
                Пункт меню
           </li>
     </ul>
</nav>


Задаём в CSS свойство
.main-menu{
position:relative;
background:#FFF;
display:table;
margin:auto;
}
/* Теперь нам нужно сделать полоску по сторонам */
.main-menu:before{
content:''';
position:absolute;
left:0;
top:0;
width:100%
height:1px;
background:#000;
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы