How to indent list items using CSS when you have floating blocks?


Tags: css,html-lists

Problem :

I observed a relative strange behavior when I use floating images in a document. The list items indentation is made relatively to the 'red line' instead of the 'green' one.

Why is this happening and can I solve this?

<img style="float: left">
<p>some text</p>
<ul>
   <li>aaa</li
   <li>bbb</li
</ul>
<p>some other text</p>

alt text



Solution :

Just add ul { list-style-position: inside; } because by default it is set to outside, not sure why.


    CSS Howto..

    how to make website more user friendly for mobile users [closed]

    dynamic drop down how to show success using css (tic icon)

    How to give space between each tab in the navigation using Jquery and CSS

    How to create styled boxes on a webpage in where I can add graphs,gaugs,numbers?

    How to set two background color to one element in CSS?

    How to make CSS animation happen the moment the website loads

    How do i hide html until its processed with javascript?

    How to write a PHP code that will group students into groups of ten using data from a database? [closed]

    Slideshow won't accept fixed height

    how to select one element in jQuery

    How to get an input set to display block to fade in with css

    How to get a table-cell aligned to the right?

    How to design multiple time clock wise rotation of a image in css

    How to fill margin space with divs and give it styles?

    how to position two divs next to each other, one of them is centered in the container of both divs

    How to achieve Expand collapse Side Nav with icon using jquery and boostrap css

    How to properly apply a css hack for IE11 transition misbehaviour

    How to turn on Visual Studio 2010 .css Intellisense on .less file

    How to implement this in pure CSS?

    How to center webpage content

    How to set css styles with variables in rails if certain item is selected?

    How do I get my divs to ease in right after eachother on page load?

    How to put all of the images from folder into CSS box

    How to use several css classes to one element?

    How to apply css to three different classes hovering one of them

    How to show “next”, “previous” buttons on an image (on mouseover)?

    How to get a button to fill the full width of the footer in Mobile View?

    How to change divs placing from horizontal to vertical using css?

    How to change menu icon when scrolling to specific sections of the website?

    CSS Divs overlapping, how do I force one above the other?