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

Я добавил дисплей: встроенный блок к классу кнопки и появляется, как вы хотите. Оформить заказ здесь: https://jsfiddle.net/uuspezu9/

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

В принципе, использование дисплея: встроенный блок вместо встроенного.