我想用 html 和 css 在屏幕左侧构建一个垂直菜单。在 javascript 的帮助下，它会在单击时弹出和弹出。菜单中的每个条目都应该有一个图标，我尝试将其放在 div 的背景中，然后水平居中，因为假想的垂直轴将通过每个图标的中心。
问题是，如果我尝试使用内联 block ，它们的行为会很奇怪，并且后面的 div 仍然与前一个的底部对齐。有谁知道如何解决这个问题？
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.menu {
width: 300px;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
background: #abcdef;
}
.icon-block {
width: 50px;
height: 50px;
display: inline-block;
background-color: #fedcba;
background-image: url('ico_menu.png');
background-repeat: no-repeat;
}
.text-block {
width: 230px;
height: 50px;
display: inline-block;
background: #acbafe;
}
.a-block {
display: block;
}
</style>
</head>
<body>
<div class="menu">
<a href="#" class="">
<div class="icon-block"><!-- VOID BLOCK, BACKGROUND IMAGE --></div><div class="text-block">
<span>Home</span>
</div>
</a>
<div class="icon-block"><!-- VOID BLOCK, BACKGROUND IMAGE --></div><div class="text-block">
<a href="#" class="a-block">
About
</a>
</div>
</div>
</body>
</html>
最佳答案
对这个类使用float:right:
.text-block {
float: right;/*Add this*/
width: 230px;
height: 50px;
display: inline-block;
background: #acbafe;
}
关于html - 在绝对定位的 div 中对齐元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24961317/