html - 使用 position: absolute 垂直对齐顶部导航项
问题描述
我正在构建一个顶部导航栏。我希望右侧的徽标和菜单项垂直居中。为此,我希望将徽标和菜单项的容器位置设置为相对位置,然后将徽标和菜单项的位置设置为绝对位置以达到效果。
这成功地适用于徽标。但是,它不适用于菜单项,实际上,一旦执行以下代码,所有菜单项都消失了。不知道这里发生了什么。
<div class="boxA">
<div class="box1">
<div class="site">
<a href=""><img src="img/logo.png"></a>
</div>
</div>
<div class="box2">
<nav class="menu">
<ul>
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
<li><a href="">menu4</a></li>
</ul>
</nav>
</div>
</div>
.boxA:after {
content:"";
display: block;
clear: both;
}
.boxA {
height: 100px;
position: relative;
border-bottom: 1px solid #E0DCDC;
}
.boxA img {
position: absolute;
top: 50%;
left: 3%;
transform: translate(0, -50%);
}
.box2 li {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
.box1 {
float: left;
width: auto;
}
.box2 {
float: right;
width: auto;
}
.box2 ul {
margin: 0;
padding: 0;
list-style: none;
}
.box2 li a {
display: block;
padding: 0px;
color: inherit;
text-decoration: none;
font-size: 12px;
}
.box2 li a:hover {
text-decoration: underline;
}
.box2 ul:after {
content: "";
display: block;
clear: both;
}
.box2 li {
float: left;
width: auto;
}
.box1 img {
position: absolute;
height: 20px;
}
解决方案
body{margin:0}
.boxA {
display: flex;
flex-direction: row;
background: #b6d6f3;
border-bottom: 2px solid #8ac8ff;
justify-content: space-between;
align-items: center;
padding: 20px 5px;
}
.site img {
width: 100px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu ul li a {
text-decoration: none;
padding: 2px 5px;
display: inline-block;
}
<div class="boxA">
<div class="box1">
<div class="site">
<a href=""><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-with-slippers.svg"></a>
</div>
</div>
<div class="box2">
<nav class="menu">
<ul>
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
<li><a href="">menu4</a></li>
</ul>
</nav>
</div>
</div>
尽量不要使用 cssfloat
属性,而是使用css grid或css flex box。
编辑 1:
如果您想在不使用flex
属性的情况下在 IE 中看到相同的结果。
.boxA:after {
content:"";
display: block;
clear: both;
}
.boxA {
height: 100px;
position: relative;
border-bottom: 1px solid #E0DCDC;
}
.boxA img {
position: absolute;
top: 50%;
left: 3%;
transform: translate(0, -50%);
}
.box2 ul {
position: absolute;
top: 50%;
transform: translate(0, -50%);
/* -- NEW -- */
right: 10px;
}
.box1 {
float: left;
/* -- NEW -- */
width: 100PX;
background-color: #cddef7;
height: 100px;
}
.box2 {
float: right;
/* -- NEW -- */
width: 50%;
background-color: #85c3f9;
height: 100px;
}
.box2 ul {
margin: 0;
padding: 0;
list-style: none;
}
.box2 li a {
display: block;
padding: 0px;
color: inherit;
text-decoration: none;
font-size: 12px;
/* --NEW-- */
padding:2px 0;
}
.box2 li a:hover {
text-decoration: underline;
}
.box2 ul:after {
content: "";
display: block;
clear: both;
}
/* DOES NOT REQUIRED--
.box2 li {
float: left;
width: auto;
}
*/
.box1 img {
position: absolute;
/* --NEW-- */
width:80px;
}
<div class="boxA">
<div class="box1">
<div class="site">
<a href=""><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-with-slippers.svg"></a>
</div>
</div>
<div class="box2">
<nav class="menu">
<ul>
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
<li><a href="">menu4</a></li>
</ul>
</nav>
</div>
</div>
推荐阅读
- c++ - 如何使用概念检查 std::less 是否有专门化?
- powerbi - 同步切片器问题
- javascript - Joomla:如何将脚本添加到标题?
- r - 在 ggplot2 中自定义特定的 x 轴刻度
- android - 挂起函数只能在协程体内调用
- javascript - 为什么在这种情况下分配数组元素不起作用?
- java - 无法在 IntelIj-IDEA 中设置 jdk 11 的路径
- javascript - 切换当前元素的可见性
- java - 带有用户输入的 While 循环 - 无法让 while 循环停止询问用户输入
- r - (从 Stata 到 R)将 egen-by 转换为 R