@738team

Проблема с отступами CSS?

Всем привет, столкнулся с проблемой в корректировке кнопок меню на сайте.
CMS сайта собственная, фреймворки CSS не использую. Вся конструкция находится в с высотой 3vw. Когда просматриваю при ширине 1000px и более, всё идёт как нужно, но если меньше, то кнопки выходят за границы хеадера. В чём проблема?
<div id="bar">
                <nav>
                    <ul>
                        <li><a href="/login">Войти</a></li>
                        <li><a href="/register">Регистрация</a></li>    
                    </ul>
                </nav>         
            </div>

#bar {
    float: right;
}
#bar nav {
    padding: 0.4vw 1vw;
}
#bar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
#bar li {
    display: inline-block; /*один из способов разместить элементы в строку*/
    margin: auto;
    padding: auto;
}
#bar a {
    margin-right: 0.5vw!important;
    margin: auto;
    color: black;
    padding: 0.4vw 1.3vw;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    font-size: 1.35vw;
    font-family: blick;
    min-width: 13%;
    transition: 0.3s;
    box-shadow: 0px 1px 2px black;
    border-radius: 0.7vw;
    background: white;    
}
#bar a:hover {
    color: white;
    background: orange;
}
  • Вопрос задан
  • 168 просмотров
Решения вопроса 1
Ankhena
@Ankhena
Нежно люблю верстку
Это проблема не с отступами, а с инлайн-блочными элементами, между которыми браузер рисует пробелы.

Если делать по-вашему с vw, то вот так: https://jsfiddle.net/kczevhsu/

Но это не решит проблемы адаптивности, все равно придется писать media условия и менять размер шрифта и отступов. Отступы у кнопок, кстати, хорошо бы перевести в em.

Сейчас при ширине ~320 ваши кнопкульки выглядят вот так:
5c1fecb1bc404397086221.png
Вряд ли кому-то комфортно читать, что на них написано.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Steelway
@Steelway
Back-end Developer, Musician, CEO LevUP Company
Все зависит от того что vw это относительная величина. Ты просматриваешь в браузере в режиме разработчика или на телефоне?
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
HTML Academy Санкт-Петербург
от 130 000 до 160 000 руб.
Smart Медицина Москва
от 120 000 руб.
26 марта 2019, в 01:09
40000 руб./за проект
26 марта 2019, в 00:54
40000 руб./за проект
26 марта 2019, в 00:31
20000 руб./за проект