Div溢出以下列表

Question

我创建了一个按钮，我希望将其放在列表中和列表上方。我不想在按钮和列表之间使用已定义的高度且没有换行符。问题是，按钮溢出列表并且列表元素不适合按钮的大小。与上面的按钮相同。

CSS

.button {
 padding: 5px;
 border-radius: 5px;
 background-color: #33F;
 color: #FFF;
 overflow: hidden;
 display: inline;
}
.list {
 margin: 0;
 padding: 0;
 border: 1px solid #000;
 border-radius: 3px;
 list-style: none;
 list-style-type: none;
 overflow: hidden;
}
.list > li {
 padding: 3px;
 border-bottom: 1px solid #111;
}
.list > li:last-child {
 border-bottom: none;
}

HTML

<div class='button'>Example Button</div>
<ul class='list'>
 <li>Entry</li>
 <li>Entry</li>
 <li>Entry</li>
 <li>Entry<div class='button'>Example Button</div></li>
 <li>Entry</li>
</ul>

Answer 1

我在你的按钮类中添加了display：inline-block并按你的意愿显示。点击此处：https://jsfiddle.net/uuspezu9/

.button {
 padding: 5px;
 border-radius: 5px;
 background-color: #33F;
 color: #FFF;
 overflow: hidden;
 display: inline-block;
}

基本上，使用display：inline-block而不是inline。