宽度没有反应

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

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

更新以根据可用空间自动调整.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>