CSS автоматически меняет ширину li при увеличении текста метки ⇐ CSS

[Anonymous]

У меня возникли проблемы с этим CSS.

• Как увеличить или уменьшить размер каждого элемента li в зависимости от размера метки?
• Кроме того, когда li достигает конца ширины страницы, как я могу перенести его на новую строку?

Например:

• Ширина черного цвета должна быть меньше
• Ширина лесного зеленого должна быть шире
• Первый ряд должен заканчиваться на Фиолетовый — это ширина страницы. Розовая роза, Розовая красная... и остальные должны переноситься на новую строку

Код: Выделить всё

.cable-config span {
font-size: 14px;
font-weight: 400;
color: #86939E;
display: inline-block;
}

.cable-choose {
list-style-type: none;
margin: 25px 0 0 0;
padding: 0;
}

.cable-choose {
white-space: nowrap;
}

.cable-choose li {
/* float: left; */
margin: 15px 5px 0 0;
width: 100px;
height: 40px;
display: inline-block;
position: relative;
}

.cable-choose label,
.cable-choose input {
display: block;
position: absolute;
/* top: 0; */
left: 0;
right: 0;
bottom: 0;
}

.cable-choose input[type="radio"] {
opacity: 0.01;
z-index: 100;
}

.cable-choose input[type="radio"]:checked+label,
.Checked+label {
background: yellow;
}

.cable-choose label {
border: 2px solid #E1E8EE;
border-radius: 6px;
padding: 13px 20px;
font-size: 14px;
color: #000;
background-color: #fff;
cursor: pointer;
transition: all .5s;
cursor: pointer;
z-index: 90;
}

.cable-choose .sold-out {
color: #ced3d9;
}

.radio-custom:checked ~ label {
border: 2px solid #121b21;
}

.clearfix::after {
content: "";
clear: both;
display: table;
}

Код: Выделить всё

Color:

[list]
[*]
Black

[*]
Forest Green

[*]
Light Purple

[/list]

Подробнее здесь: https://stackoverflow.com/questions/787 ... -increases