25
4
我正在尝试为具有水平菜单选项卡(由指向其他 html 文件的链接组成)的网页制作标题，但我发现很难将图标与菜单选项卡对齐在同一水平行上，同时保持图标和选项卡对齐方式不同(图标在左边，选项卡在右边)。当我将图标移出与链接相同的组并使用 css 使它们以不同方式对齐时，结果是两个(图标和选项卡)位于不同的行中。我什至尝试将 align 属性直接用于图像标签，但它也使所有内容都向左对齐。
到目前为止，这是我的代码，使用随机 Logo 图像。
个人中心
文章发布
退出<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>[Website-Name] | Home</title>
</head>
<style type="text/css">
img {
text-align: left;
}
ul {
text-align: right;
padding: 0px;
margin: 0px
}
a{
color: white;
text-decoration: none; /* remove link underline*/
font-size: 20px;
}
div/*MENU CSS*/ {
background: black;
}
a:hover /* Change color mouse hover */,
a:active {
color: orange;
}
li { /*Space between tabs */
display: inline;
padding: 0px 25px 0px 25px; /* distance between menu tabs*/
vertical-align: middle;
}
</style>
<body>
<nav>
<div>
<img src="icon.jpg">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="drawing.html">Drawing</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="handcrafted.html">Handcrafted</a></li>
<li><a href="literature.html">Literature</a></li>
<li><a href="search.html">Search</a></li>
</ul>
</div>
</nav>
</body>
</html>
下面是一张图片，比较了我希望代码执行的操作和代码(上面)实际执行的操作: /image/hTGob.jpg
这是上面代码中使用的 icon.jpg: /image/qW4UU.jpg
在此先感谢您，如果您有什么需要我澄清的，请询问!
最佳答案
li { /*Space between tabs */
display: inline-block;
padding: 0px 25px 0px 25px; /* distance between menu tabs*/
vertical-align: central;
line-height:100%;
height:100%;
}
a{
display: inline-block;
line-height:100px;
height:100%;
}
div/*MENU CSS*/ {
background: black;
height:100px;
}
img {
text-align: left;
height:100px;
}
ul {
text-align: right;
padding: 0px;
margin: 0px;
float:right;
height:100%;
}
替换以下 css 元素，这假定图像高度为 100px，因此将所有出现的元素更改为图像的实际高度
关于html - 如何使标题菜单垂直对齐和图标左对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44401239/
25
4
0