Div Overflows Following List

Question

I have created a button which I want to place inside a list and above a List. I don't want to use a defined height and no linebreak between the button and the list. The problem is, that the button overflows the list and the list element does not fit itself to the size of the button. Same with the Button above.

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

I added display:inline-block to your button class and appears as you want. Checkout here: https://jsfiddle.net/uuspezu9/

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

Basically, use display:inline-block instead of inline.