Left margin issues with ListItems flowing around a floated item

I have a floating box element and an unordered list of elements wrapping around it. The margins of the listItems seem to overlap the floating item.

Here's a simplified example:

<p>some text</p>
<div class="leftcaption">image with caption</div>
<p>some more text, now comes a list</p>
<ul>
    <li>Item (bad left margin)</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item (correct left margin after the caption div)</li>
</ul>

      

CSS:

* { margin:5px; }
ul {
    list-style-type:disc;
    margin-left:30px;
}
.leftcaption {
    float:left;
    margin: 5px 5px 5px 0;
    /* just to make it look like a real caption: */
    background-color: #DDD;
    width:100px;
    height:100px;
}

      

It looks like this:

Example of the wrong list item margin

One way would be to make the unordered list a block-level element, but then it won't flow anymore, and furthermore, it would be pushed down if there was also a block floating to the right.

+3


source to share


2 answers


Add a rule list-style-position:inside;

to your CSS.

JsFiddle example



ul {
    list-style-type:disc;
    margin-left:30px;
    list-style-position:inside;
}

      

+4


source


An alternative way that will allow you to add margin:

ul {
    margin-left:0; list-style-type:none;
}
ul li:before{
    content:"\00A0\25cf\00A0\00A0\00A0";
}

      



The solution provided by @ j08691 is probably still the best option, but the left margins and padding should be set to 0 to make the spacing consistent.

This workaround, as with a disk, can introduce unused spaces.

+1


source







All Articles