我有一个元素列表,其中一个元素是一些文本和一个按钮。我希望文本位于按钮旁边。我使用了 inline-block
但它不起作用。
请注意,我也希望文本换行。
<ul>
<li>
<div class="inline-block">
Side by side
</div>
<div class="inline-block">
Side by side
</div>
</li>
<li>Profile</li>
<li>Logout</li>
</ul>
样式:
.inline-block {
display: inline-block;
}
ul {
position: absolute;
padding: 4px 0;
top: 28px;
right: 0;
width: 80px;
background-color: white;
border: 1px solid hsl(0, 0%, 80%);
border-radius: 4px;
box-shadow: 0 3px rgba(0, 0, 0, 0.05);
list-style-type: none;
}
代码笔:http://codepen.io/TimGThomas/pen/oXzpXL
编辑
我达到了预期的结果。旁边有很多环绕的文字和一个按钮。我希望按钮在中间垂直对齐,我尝试了 vertical-align:middle
但它不起作用。
<ul style="width: 300%">
<li>
<div>
<div class="inline-block text-mid">
A lot of wrapped text
A lot of wrapped text
A lot of wrapped text
</div>
<div class="inline-block" style="vertical-align:middle;">
In the middle
</div>
</div>
</li>
</ul>
风格:
.text-mid {
width: 100px;
}
最佳答案
关于javascript - 如何在列表中并排显示 div(内联 block 不起作用)同时垂直对齐右侧的 div(垂直对齐不起作用),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31315255/