如何在HTML页面中添加底部工具栏

僵尸指南

我想添加一个底部工具栏，如下所示。

工具栏

我正在尝试以下代码

bottom-bar {
	display: inline-block;
	float: left;
	margin:auto;
	height: 5em;
	width: 2em;
                    }

<div class="bottom-bar">
		<table style="width:100%;">
			<tr>
				<td><img class="home" src="F:\images for apps\App_Icons-2016-07-07\App Icons\mood4.png">
				</td>
			<td><img class="statistics" src="F:\images for apps\App_Icons-2016-07-07\App Icons\charticon.png">
				</td>
			<td><img src="F:\images for apps\App_Icons-2016-07-07\App Icons\compass.png">
				</td>
			<td><img src="F:\images for apps\App_Icons-2016-07-07\App Icons\my profile.png">
				</td>
			</tr>
		</table>
	</div>

但是我没有得到我所期望的。我的结果如下所示

这些图像比我预期的要大，并且第三个图像也不可见。如何编辑我的代码以获得预期的结果。谢谢

兰迪

我个人会避免使用表格，而去寻找div元素。

您可以使用flex-box实现此目的，并为图像添加最大高度。这样，您可以将未限制的链接添加到页脚，它将始终看起来居中并对齐。

.image img {
  max-height:25px;
}

.footer {
  display:flex;
  border:1px solid black;
}

.footer .image {
  flex: 1 1 auto;
  text-align:center;
  height:25px;
}

<div class="footer">
  <div class="image">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="image">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="image">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="image">
    <img src="http://placehold.it/200x200">
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。