Как сделать все объекты в линию

Question

Как сделать все объекты в линию

Рейтинг: 0Ответов: 2Опубликовано: 02.03.2023

Я пытался это сделать множественными способами, но не получилось. Вот html код:

<body>
  <div class="Hat">
    <h2>Logo</h2>
    <div class="Hot-P">
      <div class="Menu">
        <p class="Hot-P pp">Home</p>
        <p class="Hot-P pp1">Skils</p>
        <p class="Hot-P pp2">Project</p>
      </div>
      <div class="comunication">
        <button class="twitter">twitter</button>
        <button class="skipe">skipe</button>
        <button class="instagram">instagram</button>
        <button class="linkedin">linkedin</button>
      </div>
      <button type="button" class="btn btn-secondary">Let's connect</button>
    </div>
  </div>
</body>

css html

Источник: Stack Overflow на русском

Answer 1

▲ 1

Как сделать все объекты в линию?

Как вариант...

.Hat,
.Hot-P {
  display: flex;
  align-items: center;
  gap: 30px;
}

.Menu,
.comunication {
  display: flex;
  gap: 10px;
}

<body>
  <div class="Hat">
    <h2>Logo</h2>
    <div class="Hot-P">
      <div class="Menu">
        <p class="Hot-P pp">Home</p>
        <p class="Hot-P pp1">Skils</p>
        <p class="Hot-P pp2">Project</p>
      </div>
      <div class="comunication">
        <button class="twitter">twitter</button>
        <button class="skipe">skipe</button>
        <button class="instagram">instagram</button>
        <button class="linkedin">linkedin</button>
      </div>
      <button type="button" class="btn btn-secondary">Let's connect</button>
    </div>
  </div>
</body>

Answer 2

▲ 0

body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.Hat {
  width: 200px;
}

.Hot-P {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.comunication {
  display: flex;
}

.btn {
  margin-left: auto;
}

<body>
  <div class="Hat">
    <h2>Logo</h2>
    <div class="Hot-P">
      <div class="Menu">
        <p class="Hot-P pp">Home</p>
        <p class="Hot-P pp1">Skils</p>
        <p class="Hot-P pp2">Project</p>
      </div>
      <div class="comunication">
        <button class="twitter">twitter</button>
        <button class="skipe">skipe</button>
        <button class="instagram">instagram</button>
        <button class="linkedin">linkedin</button>
      </div>
      <button type="button" class="btn btn-secondary">Let's connect</button>
    </div>
  </div>
</body>

Как сделать все объекты в линию

Ответы