移动页面底部工具条有3个图标，如何平分？在设置边框后最后一个图标掉下去了怎么办？

这个问题通常是因为工具条的宽度没有正确计算或者最后一个图标的宽度导致溢出。以下是一些解决方法，并解释了可能的原因：

1. Flexbox 布局 (推荐):

Flexbox 是最简单和最灵活的解决方案。它可以自动处理元素的排列和分配空间。

<div class="toolbar" style="display: flex; justify-content: space-around; align-items: center; width: 100%; border: 1px solid black;">
  <div class="icon">图标1</div>
  <div class="icon">图标2</div>
  <div class="icon">图标3</div>
</div>

• display: flex; 启用 Flexbox 布局。
• justify-content: space-around; 使图标之间以及图标与边框之间有相等的间距。 你也可以使用 space-between (图标之间间距相等) 或 space-evenly (图标与边框、图标之间间距都相等) 根据你的需求调整。
• align-items: center; 垂直居中对齐图标。
• width: 100%; 使工具条占据父容器的整个宽度。

2. Grid 布局:

Grid 布局也能很好地解决这个问题，并提供更精细的控制。

<div class="toolbar" style="display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; width: 100%; border: 1px solid black;">
  <div class="icon">图标1</div>
  <div class="icon">图标2</div>
  <div class="icon">图标3</div>
</div>

• display: grid; 启用 Grid 布局。
• grid-template-columns: 1fr 1fr 1fr; 将工具条分成三等份。
• align-items: center; 垂直居中对齐图标。

3. 浮动布局 (不推荐，但可以了解):

虽然可以用浮动布局实现，但它比较复杂且容易出现问题，不建议使用。

4. 内联块元素:

可以将图标设置为内联块元素，并设置父元素的 text-align: center 来居中。但这种方法对图标大小的控制不如 Flexbox 和 Grid 精确。

最后一个图标掉下去的可能原因和解决办法：

• 宽度计算错误: 确保工具条的宽度足够容纳三个图标以及它们之间的间距和边框。如果使用百分比宽度，要确保父元素的宽度设置正确。
• 图标宽度: 如果图标的宽度是固定的，并且三个图标的总宽度加上边框和间距超过了工具条的宽度，最后一个图标就会掉下去。尝试使用相对单位 (例如百分比) 或 max-width 来限制图标的宽度。
• 盒模型: CSS 的盒模型 (box model) 会影响元素的实际大小。padding 和 border 会增加元素的尺寸。确保在计算宽度时考虑了这些因素。可以使用 box-sizing: border-box; 来简化计算，使 padding 和 border 包含在元素的总宽度内。
• 清除浮动: 如果使用了浮动布局，需要清除浮动，否则父元素的高度可能无法正确计算，导致最后一个图标掉下去。

建议:

优先使用 Flexbox 或 Grid 布局，它们更易于使用和维护。 仔细检查宽度计算和盒模型，确保没有溢出。 使用浏览器的开发者工具检查元素的尺寸和布局，可以帮助你快速找到问题所在。

希望这些信息能帮到你！