Задать вопрос
@Samrux
css

Что делать, если не работает inline-block?

Не работает display: inline block:

header .mnu_top li {
display: inline-block;
margin-right: 75px;
}


HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/main.css">
    <title>Document</title>
</head>
<body>

    <header>
        <a href="" class="logo"><img src="../images/biler.png" alt=""></a>  
        <ul class="mnu_top">
            <li><a href="#">History</a></li>
            <li><a href="#">Culture</a></li>
            <li><a href="#">Language</a></li>
        </ul>
        <div class="btns">
            <a href="#" class="btn_green">Join The Movement</a>
        </div>
    </header>
    
</body>
</html>


CSS:

html, body {
    height: 100%;
}

body {
    font-size: 16px;
    max-width: 320px;
    position: relative;
    line-height: 1.65;
    font-family: "Monsterrat", sans-serif;
    overflow-x: hidden;
    opacity: 1;
}

img {
    max-width: 100%;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

header {
    margin: 44px auto;
    max-width: 85%;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(52, 79, 121, .56);
}

header .logo{
    min-width: 250px;
}

header .mnu_top{
    list-style-type: none;
}

header .mnu_top li {
    display: inline-block;
    margin-right: 75px;
}

header .mnu_top li a{
    display: block;
    text-decoration: none;
    color: #4F4C67;
    font-size: 18px;
    font-weight: 600;
}


Результат:
61751a70cf157983763972.png

Здесь я хотел, чтобы History, Culture и Language были в одну линию.
  • Вопрос задан
  • 300 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
ты уже использовал flex для header. что тебе мешает использовать его и на навигацию?
header .mnu_top {display: flex;}
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ответы на вопрос 1
Pavel-ww
@Pavel-ww
Надо очистить всё у ul а не только list-style, надо убрать display block у li > a, для li display inline, а не inline-block.

Или вместо всех этих inline для li просто воспользоваться современными технологиями
.mnu_top {
	display: flex;
	gap: 0 75px;
}

Или вот так, что будет надежнее для старых IOS
.mnu_top {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min-content;
	grid-gap: 0 75px;
}


И еще с body разобраться. Вы все это пытаетесь делать при ширине body 320px. Это же всё не помещается внутрь body.
В целом, не грамотная верстка. Надо использовать контейнер, а не задавать ширину body.

И совет - вендорные префиксы добавляйте в самом конце, когда верстка уже готова и отлажена. Для этого есть post css плагины для редакторов кода
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Обработать массив фотографий
19 апр. 2024, в 08:46
5000 руб./за проект
Скрыть / убрать лишние поля в форме заказа
19 апр. 2024, в 07:30
1500 руб./в час
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Ещё заказы