[英]How to display divs side by side inside a list (inline-block doesn't work) while vertically align the right div (vertical-align doesn't work)
I have a list of items where an item is some text and a button. 我有一个项目列表,其中一个项目是一些文本和一个按钮。 I want text to be aside the button.
我希望文本放在按钮旁边。 I used
inline-block
but it doesn't work. 我使用了
inline-block
但无法正常工作。
Note that I want text to wrap too. 请注意,我也希望文字换行。
<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>
styles: 样式:
.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;
}
Codepen: http://codepen.io/TimGThomas/pen/oXzpXL Codepen: http ://codepen.io/TimGThomas/pen/oXzpXL
I achieved the expected result. 我达到了预期的结果。 There is a lot of wrapped text and a button aside.
有很多包装文本和一个按钮。 I want button to vertically align in the middle, I tried
vertical-align:middle
but it doesn't work. 我希望按钮在中间垂直对齐,我尝试了
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>
style: 样式:
.text-mid {
width: 100px;
}
New Codepen: http://codepen.io/anon/pen/wajWBV 新的Codepen: http ://codepen.io/anon/pen/wajWBV
Give bigger UL width: 提供更大的UL宽度:
ul {
width: 280px;
}
CodePen: http://codepen.io/anon/pen/wajWBV CodePen: http ://codepen.io/anon/pen/wajWBV
我认为您最好使用<span>
代替<div>
,默认将<span>
display
属性设置为inline
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.