Выровняйте элементы одинаково, используя CSS с разными родительскими элементами

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

<div class = "container">
  <div class = "buttons">
   <button>test</button>
   <button>test</button>
   <button>test</button>
   <button>test</button>
 </div>
 <button class = "outer">test</button>
</div>

.container{
  display:flex;
  width:100%
}
.buttons{
  display: flex;
  width: 75%;
  justify-content: space-between;
}
.outer{
  margin-left:auto
}

Ссылка на мой код https://jsfiddle.net/f74ayxh9/

Мне нужен такой результат с одинаковым интервалом и запасом, но с моей структурой HTML.

Спасибо

🤔 А знаете ли вы, что...
HTML использует мета-теги для определения метаданных страницы, таких как заголовок и описание.


50
1

Ответ:

Решено

Вы можете сделать это с помощью display: contents на элементе-контейнере кнопки.

.container {
  display: flex;
  justify-content: space-between;
  outline: 1px solid red;
  margin: 2em;
}

.buttons {
  display: contents;
}
<div class = "container">

  <div class = "buttons">
    <button>
 test
 </button>
    <button>
 test
 </button>
    <button>
 test
 </button>
    <button>
 test
 </button>
  </div>
  <button class = "outer">
test
</button>
</div>