Why isn't the <li> indented next to the <img> float: left?
When I place <ul>
next to the float: the left image, the bullets overlap the image and the integer <ul>
does not recede from the left margin as expected.
How to fix it?
In the example below, compare the position of the markers and text in the first <ul>
(text lines under "e" in "camera") with the second <ul>
(text ends under "A"):
<p>A camera has:</p>
<ul>
<li>Lens</li>
<li>Box</li>
<li>Sensor</li>
</ul>
<img style="float:left" src="http://nerdfever.com/wp-content/uploads/2012/05/imgres.jpg" alt="Camera" />
<p>A camera has:</p>
<ul>
<li>Lens</li>
<li>Box</li>
<li>Sensor</li>
</ul>
This gives:
+3
source to share
2 answers
You must contain an overflow. You can add overflow: hidden
oroverflow: auto
ul {
overflow: hidden;
}
<p>A camera has:</p>
<ul>
<li>Lens</li>
<li>Box</li>
<li>Sensor</li>
</ul>
<img style="float:left" src="http://nerdfever.com/wp-content/uploads/2012/05/imgres.jpg" alt="Camera" />
<p>A camera has:</p>
<ul>
<li>Lens</li>
<li>Box</li>
<li>Sensor</li>
</ul>
+3
source to share
You can change the position in the list style:
ul {
list-style-position: inside;
}
<p>A camera has:</p>
<ul>
<li>Lens</li>
<li>Box</li>
<li>Sensor</li>
</ul>
<img style="float:left" src="http://nerdfever.com/wp-content/uploads/2012/05/imgres.jpg" alt="Camera" />
<p>A camera has:</p>
<ul>
<li>Lens</li>
<li>Box</li>
<li>Sensor</li>
</ul>
0
source to share