Question

HTML:

<div class="list">
<ul>
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li>
        <ul>
            <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
            <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
            <li><a href="#">C3</a></li>
            <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
            <li><a href="#">C5</a></li>
        </ul>
    </li>
    <li><a href="#">D</a></li>
    <li><a href="#">E</a></li>
    <li><a href="#">F</a></li>
</ul>
</div>

CSS:

.list{
width:300px;
}

a{
text-decoration:none;
color:#000;
}

.list ul{
padding:0 0 0 12px;
list-style:none;
}

.list ul li{
margin-bottom:8px;
padding-bottom:8px;
border-bottom:1px dashed #CCC;
}

.list ul li a{
display:block;
line-height:15px;
padding:0 0 0 9px;
float:left;
}

.list ul li ul{
padding:0 0 10px 15px; 
}

.list ul li ul li{
margin:4px 0;
min-height:7px;
border:none;
}

.list ul li ul li a{
display:block;
line-height:15px;
padding:0 0 0 9px;
float:left; 
}

I do not know what the value would be for list item because of dynamic content. There isn’t any problem for single line.But if there are double line for list item, list border-bottom is shifting like below image;

If I remove “float:left” from a tag css, getting better but I don’t want remove it because it cause other problems at site.How can I fix this with other way?

Answer 1

Try adding overflow: hidden to .list ul li