Я хочу выровнять элементы с одинаковым интервалом и с разными родительскими элементами, не добавляя к этим элементам ширины. Я попробовал код ниже, но не работал. Пожалуйста, помогите мне в этом.
<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 использует мета-теги для определения метаданных страницы, таких как заголовок и описание.
Вы можете сделать это с помощью 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>