宽度没有反应，因为它应该

Question

我正在开始我的第一个项目，创建一个网站，我在尝试设置 div 的宽度时遇到了一些问题。不知何故，它没有占用该元素可用宽度的 100%。（我希望它们水平显示，它们之间 space 相等）我只能让三个列表项在他的行的开头（左）一个挨着另一个

那就是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

div在哪里？您是指 ul 元素吗？

如果是这样，那实际上是 100% 宽度。

如果您的意思是希望 li 为 100%，您只需使用：

.sort_btn { list-style: none; }

Answer 2

而是使用 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 3

已更新以根据可用的 space 自动调整 .sort_btn 的宽度，并且 .sort_buttons 填充一行中剩余的可用 space（即，如果您想要另一个按钮或菜单）。

我想这就是你的目标。

.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>

宽度没有反应，因为它应该

Width not reacting as it should

css

width

responsive