如何在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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在PreferenceActivity中添加工具栏

如何在tinyMCE中添加字体大小的工具栏?

如何在键盘上方添加工具栏?

如何在Android的工具栏中添加刷新和搜索之类的按钮?

如何在自定义的tinymce下拉菜单中添加工具栏按钮?

如何在Android工具栏中添加按钮以搜索视图?

如何在工具栏中添加图像

如何在工具栏中添加带有编辑文本的搜索栏

android:如何在折叠的工具栏中添加带有文本的按钮

如何在Android中的标签布局或工具栏上添加底影

如何在Xamarin表单工具栏和UINavigationBar中添加渐变

如何在jupyter笔记本(v5.2.2)的页面底部隐藏/删除演示文稿工具栏?

如何在React Native App中添加圆形底部可折叠工具栏?

滚动页面时如何在经典编辑器中禁用粘性工具栏?

如何在“笔管”的工具栏中添加对齐按钮?

如何在Ionic工具栏上为所有页面添加按钮?

如何在indelliJ IDEA中的底部工具栏窗口前面移动右工具栏窗口?

如何在Visual Studio工具栏中添加WebView2控件?

如何在键盘上方添加工具栏

如何在swiftui(macos)中向工具栏添加文本字段

如何在页面标记中定义自定义ckeditor工具栏

如何在Nautilus工具栏上添加/删除按钮?

如何在jqgrid工具栏上添加刷新按钮?

如何在EXTJS 4中将工具栏添加到网格

如何在屏幕底部添加工具栏?

如何在布局中心添加工具栏标题

如何在stimulsoft工具中向工具栏添加自定义图标

如何在 Intellij IDEA 中的 git 工具栏中添加按钮

如何使工具栏项目仅显示在某些页面中