HTML CSS examples for CSS Widget:UL Element
put <a> at the end of <li> line
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ul {<!--from w w w . j a v a 2 s .c om--> width:334px; } ul ul { width:inherit; } a { overflow:hidden; text-overflow:ellipsis; } ul.tree li { list-style:none; padding:0px; padding-left:21px; margin:0px; white-space:nowrap; } ul.tree a { color:Chartreuse; text-decoration:none; display:block; padding:0px 3px; background-color:yellow; } ul.tree .delete { background-color:blue; margin:0 0 0 6px; display:inline; float:right; } ul.tree a:hover { background-color:pink; } .tree li.directory { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') left top no-repeat; } .tree li.file { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') left top no-repeat; } </style> </head> <body> <ul class="tree"> <li class="directory"> <a href="" class="delete">Lorem </a> <a href="">Lore</a> <ul> <li class="file"> <a href="" class="delete">Lorem </a> <a href="">Lorem ipsum do</a> </li> <li class="file"> <a href="" class="delete">Lorem </a> <a href="">Lorem </a> </li> </ul> </li> <li class="file"> <a href="" class="delete">Lorem </a> <a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. </a> </li> <li class="file"> <a href="" class="delete">Lorem </a> <a href="">Lorem ipsum</a> </li> </ul> </body> </html>