1

Элементы не отображаются в одну строчку

div.header_image {
  margin: 0;
  padding: 0;
  background-color: #333333;
  overflow: auto;
  width: 100%;
  display: inline-block;
}
<div class="header_image">
  <h1 class="site_title">Test</h1>
  <a href="index.php?name=main.php">Main</a>
  <a href="index.php?name=contacts.php">Contacts</a>
</div>

1 ответ 1

1

Несколько вариантов, как расположить элементы в одну строку:

  1. inline-block:

body * {
    display: inline-block;
}
<body>
    <div>ads</div>
    <h1>qwe</h1>
    <a href="d" #>d</a>
</body>

  1. flexbox:

body {
  display: flex;
}
<body>
  <div>ads</div>
  <h1>qwe</h1>
  <a href="d" #>d</a>
</body>

  1. grid:

body {
  display: grid;
  grid-template-columns: auto auto auto;
}
<body>
  <div>ads</div>
  <h1>qwe</h1>
  <a href="d" #>d</a>
</body>

1
  • 2
    У flexbox отметил бы, что за данное расположение отвечает flex-direction: row (по умолчанию)
    – De.Minov
    1 авг 2020 в 4:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.