在绝对定位的div中并排放置两个div /ul

Question

我有一个像通知容器一样下拉的容器，我想在绝对定位的div中有两个并排的条，我不想要定义宽度，因为每个div内部都需要调整宽度(因为滚动条的存在与否)

问题是奇怪的，当。notification-wrapper有绝对或相对定位。left和。rightdiv不会并排对齐，但是当我从。notification包装器中删除绝对/相对时，它们会…(我确实需要将relative/absolute应用于notification.wrapper)

我有:

<span class="notification-wrapper">
<div class="notification-container">
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</div>
</span>


.notification-wrapper {
height: 32px;
width: 25px;
margin-right: -12px;
margin-left: -12px;
padding: 0px;
font-size: 0px;
position: absolute;
left: 50%;
top: 15px;
right: 50%;
 }
.notification-wrapper .notification-container {
font-size: 12px;
background-color: #FFF;
height: 100px;
position: absolute;
top: 25px;
}
.notification-container .left {
vertical-align: text-top;
display: inline-block;
background-color: #63F;
width: 50px;
}
.notification-container .right {
vertical-align: text-top;
display: inline-block;
background-color: #FFC;
width: 120px;
}

Answer 1

这是因为当你放置一个元素时，它会"收缩包装"，这意味着它会收缩到最小的尺寸。由于没有强制两个元素并排存在，它可以获得的最小大小是将元素堆叠起来。

我认为，由于您使用的是inline-block(而不是float)，您可以在容器上使用white-space: nowrap来强制两个inline-block元素不包装。对于元素的内容，你可能想把white-space设置回normal。

另外，span元素是div的内联版本，不允许块级元素作为子元素。

Answer 2

我不知道你的代码，请试试这个代码

.absolute-positioned{ overflow:hidden; float:left; width:auto;}
.absolute-positioned ul{ width:auto; list-style:none;display:inline-block; }
.absolute-positioned ul li{ display:inline-block; list-style:none; line-height:auto;}
.absolute-positioned ul.left-bar{ float:left; width:auto;}
.absolute-positioned ul.right-bar{ float:right; width:auto;}

Answer 3

试试这个

1. 从.notification-wrapper中删除width:25px
2. 将position:absolute和top:25px从.notification-wrapper .notification-container中删除，改为padding-top:25px
3. 将.notification-wrapper中的right:50%更改为left:50%