Блог

Главная - Вопросы по программированию - Как мне разместить 4 заголовка из 1 div рядом друг с другом?

Как мне разместить 4 заголовка из 1 div рядом друг с другом?

#css #html #web

#css #HTML #веб

Вопрос:

У меня есть меню с четырьмя ссылками в виде элементов H4 плюс изображение. Все они находятся в одном div с меню класса. Как бы я поступил в CSS, чтобы все они образовали одну строку?

Это мой html:

     <html>
    <head> <title>Testing menu</title> </head>
    <body>
    <div class="menu">
        <a href="index.html"><img src="img/logo.png"></a>
        <a href="program.html"><h3>Program</h3></a>
        <a href="info.html"><h3>Informasjon</h3></a>
        <a href="aktiviteter.html"><h3>Aktiviteter</h3></a>
        <a href="kontakt.html"><h3>Kontakt</h3></a>
    </div>
    </body>
    </html>

Какой CSS я должен использовать, чтобы все элементы в div располагались рядом друг с другом?

Ответ №1:

ДЕМОНСТРАЦИЯ

использовать display: inline-block;

css

 .menu a {
    display: inline-block;
}

Ответ №2:

Добавьте следующее правило css в свой код:

 .menu a { 

           float: left;
          padding: 10px;

        }

Ответ №3:

Попробуйте использовать inline-block :

 .menu a {
    display: inline-block;
    width: 200px;
}

Ответ №4:

 <style type="text/css">
      .menu a {
        display: inline-block;
      }
</style>

Ответ №5:

Вот Скрипка

css inline-block поможет 

   .menu a{
    display: inline-block;
    float:left;

    }