Mover Mover - 2 months ago 19
CSS Question

Make inner list items to fill parent list item in bootstrap

I want to eliminate the the margin in the following nested list-items by forcing the inner list-items to fill their parent list-item. See JSFiddle:

<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
This is the heading
</div>
<div class="panel-body">
<ul class="list-group parentList">
<li class="list-group-item">
Hello
</li>
<li class="list-group-item nomargin">
<ul class="list-group childList">
<li class="list-group-item nomargin">
Hello.Child 1
</li>
<li class="list-group-item child">
Hello.Child 2
</li>
</ul>
</li>
</ul>
</div>
</div>




And here is the css:

.nomargin {
margin-left: 0px !important;
margin-right: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important
}

.parentList {
display: inline-block;
position: relative;
}

.childList {
width: 100%;
}

Answer

These spaces caused by padding ,So you need to add padding: 0 not margin

Demo

Comments