我正在尝试创建一个垂直选项卡控件(其中选项卡是容器右侧的垂直按钮堆栈，显示区域位于这些按钮的左侧。基本上是两列设置。
我似乎无法弄清楚如何在不诉诸绝对定位的情况下实现这一点(我想避免这种情况，因为它似乎没有必要)。因此，我当前的解决方案尝试通过设置 div inline-block 来实现此目的并指定它们的宽度，以便它们适合父容器。
但是，正如您在下面看到的，菜单 div 不断下降到下一行。我哪里出了问题以及如何解决这个问题？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="Stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="script.js"></script>
<style>
.menu.container{
background:#999;
width:150px;
position:relative;
height:75px;
}
.menu.container div:first-child{
width:calc(100% - 25px);
height:100%;
background:red;
display:inline-block;
}
.menu.container div:nth-child(2){
width:25px;
height:75px;
background:#fff;
display:inline-block;
}
.menu.container div:nth-child(2) button{
background:#333;
border:none;
color:#fff;
width:25px;
height:25px;
}
.menu.container div:nth-child(2) button:hover{
background:#666;
cursor:pointer;
}
</style>
</head>
<body>
<div class="menu container">
<div>Some UI here</div>
<div>
<button><i class="fa fa-trash"></i></button>
<button><i class="fa fa-cog"></i></button>
<button><i class="fa fa-info"></i></button>
</div>
</div>
</body>
</html>最佳答案
您可以使用 flexbox 来完成此操作。只需给您的 .menu.container 类一个 display: flex; 即可。
CSS
.menu.container {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="Stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="script.js"></script>
<style>
.menu.container{
background:#999;
width:150px;
position:relative;
height:75px;
display: flex;
}
.menu.container div:first-child{
width:calc(100% - 25px);
height:100%;
background:red;
display:inline-block;
}
.menu.container div:nth-child(2){
width:25px;
height:75px;
background:#fff;
display:inline-block;
}
.menu.container div:nth-child(2) button{
background:#333;
border:none;
color:#fff;
width:25px;
height:25px;
}
.menu.container div:nth-child(2) button:hover{
background:#666;
cursor:pointer;
}
</style>
</head>
<body>
<div class="menu container">
<div>Some UI here</div>
<div>
<button><i class="fa fa-trash"></i></button>
<button><i class="fa fa-cog"></i></button>
<button><i class="fa fa-info"></i></button>
</div>
</div>
</body>
</html>关于html - 在两列垂直制表结构中定位 div 时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39001510/