Ширина не реагирует как следует

Question

Я начинаю свой первый проект по созданию веб-сайта, и у меня возникают некоторые проблемы при попытке установить ширину div.Почему-то это не занимает 100% ширины, доступной для этого элемента. (Я хочу, чтобы они отображались горизонтально с равным интервалом между ними). ​​Я могу получить только три элемента списка, чтобы они находились рядом друг с другом в начале (слева) отего линия

Вот HTML:

.sort_buttons {display:inline-block;
  width: 100%;
}
.sort_btn  {display:inline-block;
                    margin:auto;
                    width:auto }

 <ul class="sort_buttons">
         <li class="sort_btn" type="button" name="button">size</li>
         <li class="sort_btn" type="button" name="button">size</li>
         <li class="sort_btn" type="button" name="button">size</li>
      </ul>

Заранее спасибо.

Answer 1

Вместо этого используйте display:inline-block;, используйте display:flex для переноса div (в вашем случае: sort_buttons)

.sort_buttons {display:flex;
  width: 100%;
}
.sort_btn  {
                    margin:auto;
                    width:auto }

 <ul class="sort_buttons">
         <li class="sort_btn" type="button" name="button">size</li>
         <li class="sort_btn" type="button" name="button">size</li>
         <li class="sort_btn" type="button" name="button">size</li>
      </ul>

Answer 2

Обновлен для автоматической настройки ширины .sort_btn в зависимости от доступного пространства, а также имеет .sort_buttons заполнение свободного места, оставшегося в строке (т. Е. Если вы хотите другую кнопку или меню).

Я думаю, это то, к чему ты стремишься.

.bar {
  display: flex;
}
 
.sort_buttons {
  display:flex;
  flex: 1;
}

.sort_btn  {
  margin:auto;
  width:auto 
}

<div class="bar">
 
     <div class="title">
         Sort Options:
     </div>
 
     <div class="sort_buttons">
         <div class="sort_btn">size</div>
         <div class="sort_btn">size</div>
         <div class="sort_btn">size</div>
      </div>
  
</div> 

Answer 3

Где div?Вы имеете в виду элемент ul?

Если это так, то на самом деле это ширина 100%.

Если вы хотите, чтобы li было 100%, выпросто нужно использовать:

.sort_btn { list-style: none; }