Я почти уверен, что мне удалось сделать это случайно при разработке этой страницы, но теперь я не могу до конца понять, что я сделал.
Я пытаюсь создать три <div>
s следующим образом:
- Все элементы одинаковой ширины
- Ширина должна соответствовать самой широкой
<div>
- Общая ширина должна быть не более необходимой (ie не полная ширина экрана)
- Собрание
<div>
с, которое будет центрировано на странице
Пока у меня есть следующее:
.switch-buttons-container {
display: flex;
flex-flow: wrap;
justify-content: center;
margin: auto;
}
.button-div {
flex: 1 1 0;
padding: 5px;
color: grey;
border: 1px solid black;
background-color: rgba(0,0,0,0.25);
border-radius: 0px 0px 10px 10px;
line-height: 28px;
font-size: 22px;
margin-left: 2px;
margin-right:2px;
font-weight: bold;
cursor: pointer;
}
.selected {
color: white;
background-color: rgba(0,0,0,0.5);
}
.indicator, .indicator-selected {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid black;
margin-right: 10px;
}
.indicator {
background-color: grey;
}
.indicator-selected {
background-color: yellow;
}
.button-text {
display: inline-block;
}
<div class="switch-buttons-container" id="systems-selection-box">
<div class="button-div selected" id="system1">
<div class="indicator-selected"> </div>
<div class="button-text">System 1</div>
</div>
<div class="button-div" id="system2">
<div class="indicator"> </div>
<div class="button-text">Sys 2</div>
</div>
<div class="button-div" id="system3">
<div class="indicator"> </div>
<div class="button-text">3</div>
</div>
</div>
Как вы можете видеть, это заполняет всю ширину экрана, а не делает кнопки настолько широкими, насколько это необходимо.
Обратите внимание, что текстовое содержимое кнопок не известно во время разработки, и есть другие области страницы, которые имеют различные требования к ширине, поэтому это не может быть ограничено в элементе body.
Я предполагаю, что Мне нужно что-то исправить в классе .switch-buttons-container
, но я искал и искал и пробовал все виды, но просто не могу понять это правильно.