Блог

Я хочу разместить следующие элементы, например, на изображении внутри div «кнопки-обертка».

    <div id="buttons-wrapper">
            <div id="move-buttons-wrapper">
                <a href="#" class="main-btn move-btn" id="move-line-btn" onclick="setNewMove('line')">Ligne</a>
                <a href="#" class="main-btn move-btn" id="move-circle-btn" onclick="setNewMove('circle')">Cercle</a>
            </div>
            <div id="delay-wrapper">
                <input type="text" class="delay" id="delay-input" placeholder="Secondes à attendre" maxlength="6" size="10">
                <a href="#" class="main-btn delay" id="set-delay-btn" onclick="setDelay()">✚</a>
            </div>
            <a href="#" class="main-btn" id="get-scene-btn" onclick="downloadSceneFile()">Télécharger la scène</a>
    </div>
 

Я уже создал стиль для кнопок и ввода, но не могу понять, как их правильно расположить.
Я попробовал несколько вещей, но в большинстве случаев свойства CSS не влияют на элементы. Хотя отображение таблицы должно было сделать свое дело, но оно также потерпело неудачу.

Просто используйте flexbox, если вы хотите выровнять элементы в одном направлении по горизонтали или вертикали.

Оберните delay-wrapper и a.main-btn в родительский контейнер bottom-wrapper , чтобы вы могли расположить один слева, а другой на другом конце, используя justify-content: space-between;

 #buttons-wrapper {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;    // Just to give some breathig space between childrens
  border: 3px solid green;
}

.main-btn {
  border: 2px solid black;
  padding: .25rem .5rem;
}

input.delay {
  border: 2px solid black;
}

.bottom-wrapper {
  display: flex;
  justify-content: space-between;
} 

 <div id="buttons-wrapper">
  <div id="move-buttons-wrapper">
    <a href="#" class="main-btn move-btn" id="move-line-btn" onclick="setNewMove('line')">Ligne</a>
    <a href="#" class="main-btn move-btn" id="move-circle-btn" onclick="setNewMove('circle')">Cercle</a>
  </div>
  <div class="bottom-wrapper">
    <div id="delay-wrapper">
      <input type="text" class="delay" id="delay-input" placeholder="Secondes à attendre" maxlength="6" size="10">
      <a href="#" class="main-btn delay" id="set-delay-btn" onclick="setDelay()">✚</a>
    </div>
    <a href="#" class="main-btn" id="get-scene-btn" onclick="downloadSceneFile()">Télécharger la scène</a>
  </div>
</div>