我创建了一个按钮，希望将其放置在列表内和列表上方。我不想使用定义的高度，并且按钮和列表之间没有换行符。问题是按钮溢出列表，而list元素本身不适合按钮的大小。与上面的按钮相同。
的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>
我在您的按钮类中添加了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。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句