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>

宽度没有反应

3 个答案: