html - 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。