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

Question

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

我正在尝试使用以下代码

＆＃13;

＆＃13;

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


                   

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但我没有得到我的期望。我的结果如下 mytoolbarresult

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

Answer 1

我个人会避免使用表格，而是选择div元素。

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

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;