CODEWITHSUNDEEP
htmlcss
Daniel
Daniel

Reputation: 37

List cuts end with new line

Every time my list goes to a new line of code, I end up having the end of the background & border cut off for some odd reason.

https://i.sstatic.net/zTpKx.png

li.list {
    display: inline;
    line-height: 30px;
    width: inherit;
    font-family: 'Lato', sans-serif;
    color: #8e8d8d;
    background-color: rgba(204,204,204,0.5);
    margin: 5px; margin-top: 10px; margin-bottom: 10px;
    padding: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-bottom: 1px solid #CCC; border-right: 1px solid #CCC;
}
<li class="list"><span>Timmy Smith&nbsp;&nbsp;<span class="delete-button">&times;</span></span></li>

Everything works fine on the individual li, but when the list needs to jump to the next line in order to fit the width of the container, it cuts off the end of the li.

What am I doing wrong??

Edit: As requested, here is a jsfiddle as well. http://jsfiddle.net/DannLea/t6gxg29o/

Upvotes: 3

Views: 282

Answers (1)

areim
areim

Reputation: 3769

Try using display: inline-block instead of display:inline

working DEMO

It breaks margins, but this you can fix easily.

Otherwise, using padding and margins on inline elements does not work.

Upvotes: 4

Related Questions