Geek Answers Handbook

CSS: selecting the last <li> float in the same horizontal line

I use the following CSS to place a list of boxes:

li { display: block; float: left; }

I would like to carefully adjust the fields of the <li> elements so that the last element in the row (horizontal range) receives different fields.

Are there any CSS selectors that can orient float elements based on their position?

+7
source share
4 answers

You can target them using the nth-child child selector.

 ul li:nth-child(2){ padding: 2px } ul li:nth-child(3){ padding: 7px }
+4
source

It is usually best to create a negative right margin on your block, for example:

 <ul> <li>Stuff Here</li> <li>Stuff Here</li> <li>Stuff Here</li> <li>Stuff Here</li> <li>Stuff Here</li> <li>Stuff Here</li> <li>Stuff Here</li> </ul> <style> li { float: left; width: 30%; margin-right: 3%; } ul { margin-right: -3%; /* compensate for last float %/ } </style>

My example was hastily written, but I would have noticed that the external negative margin should not be the same . You will have to play.

Does it help?

+5
source

In short, no. CSS is used by the browser to render the page. CSS is not able to find out the actual position of an element after doing this rendering.

You will need to change your HTML markup so that you can actually use the CSS selector, or you will need to use JavaScript, which can parse the position of the corresponding elements to determine which one needs to be changed.

+4
source

Use "margin-left". If you use margin-right: -3% on the parent container and the width is 100% of the page, you will get a horizontal scroll bar.

+2
source

More articles:


All Articles