html - floating part of a ul -
i have basic question.
i have page ul 7 lis, spanning 100% of page. want make last 3 lis float right, , want last 1 different color. trying not recode more necessary.
here code, how shall apply css? make ul, (but stay in line other) or apply li directly? can make special class of li let last 3 positioned in different place?
<html> <head> <style> ul { width:100%; padding:0; margin:0; list-style-type:none; } { width:6em; text-decoration:none; color:white; } </style> </head> <body> <ul> <li><a href="#">link one</a></li> <li><a href="#">link two</a></li> <li><a href="#">link three</a></li> <li><a href="#">link four</a></li> <li><a href="#">link five</a></li> <li><a href="#">link six</a></li> <li><a href="#">link seven</a></li> </ul> </body> </html>
you use :nth-child()
this. css-tricks.com/how-nth-child-works
li:nth-child(5), li:nth-child(6), li:nth-child(7) { text-align: right; } li:nth-child(7) { color: red; }
Comments
Post a Comment