html-lists

Reference this fiddle: http://jsfiddle.net/exGnZ/ Hi, I'm trying to reproduce a table of contents with an unordered list and leader dots. Unfortunately, when there's a long line of content, the formatting breaks down. Does anyone know how to get Chapter 2 in the image below to appear on the same line as the dots? Here's the code I've got at the moment: http://jsfiddle.net/exGnZ/ I'm also pasting it here: <div> <ul id="toc"> <li><span>Introduction</span> <a href="#">Chapter 1</a></li> <li><span> Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds

I'm wondering if it is possible to do this in CSS, without javascript: A list of N <li> items, with display inline, equal width, and the width of the all equal to the width of the container I can have 3 <li> items, in this case the <li> width will be 33%, or I can have 4 <li> items, then the li width will be 25%. It is possible with CSS3 flex boxes , as demonstrated in this fiddle (for webkit browsers only). There are other browser custom properties that would make this work for recent versions of Firefox and IE. If you need something that works for Opera or older versions of IE then there is

To avoid long lists I've got my li set to float: left so that they alternate rows. However, on occasion this causes an unintentional gap between elements when the content in a li takes up two lines. My HTML is: <ul class="gmc-ingredient-list"> <li>500g Tagliatelle</li> <li>50g wortel</li> <li>50g ui</li> <li>50g bleekselderij</li> <li>100g pancetta</li> <li>200g half-om-half-gehakt</li> <li>200g rundergehakt</li> <li>200 ml Primitivo (rode wijn)</li> <li>200ml runderbouillon</li> <li>5 eetlepels tomatenpuree</li> <li>Olijfolie</li> <li>Zeezout</li> <li>Verse peper</li> </ul> My CSS is: ul.gmc

I want to write a CSS selector that selects all li elements within a ul element in a document but I don't know how that would be done. Can you help? Mark ul > li { /* css styles go here */ } or ul li { /* css styles go here */ } the first selects only direct children the second selects all li nested within an ul . This should work: ul li { /*css here */} You can use ul li { /* your code here */ } 来源： https://stackoverflow.com/questions/12464500/css-to-select-all-li-in-ul

This question already has an answer here: How to hover only the current li in nested ul? 4 answers I have got an simple html unordered list. <ul> <li>Item 1</li> <li> Group 1 <ul> <li>Item 2</li> <li>Item 3</li> </ul> </li> </ul> I want to use CSS to make a simple effect when the mouse is over an Item or a Group. li:hover { background-color:#ff0000; } It works quite fine for "Group 1" or "Item 1" (not contained in a group) - When I'm moving the mouse over the color changes. But if I move over "Item 2" or "Item 3" "Group 1" also remains hightlighted (red background). In this case I only want to

how to organize html code (with usage ol\li ect.) to present such lists (with sublists) 1. BLA-BLA-BLA 1.1. Bla-bla-bla. 1.2. Bla-bla-bla. 1.3. Bla-bla-bla: lalal - balalala; lalal - balalala; lalal - lalalla. 1.4. Blal-a lalslas 1.4.1. bklalala 1.4.2. sdsdsdsdsd note: It is not the same that I want vaugham ol tag means ordered list (with numbers). ul tag means unordered one. Overlapping ol lists allow this kind of presentation : 1.1.2 <ol> <li>BLA-BLA-BLA <ol> <li> Bla-bla-bla.</li> <li> Bla-bla-bla.</li> <li> Bla-bla-bla. <ul> <li>lalal - balalala;</li> </ul> </li> </ol> </li> </ol> Bruno

If a ul has li items with multiple classes, is it possible to get the last item of a specific class using :last-child? For example, consider following: <ul class="test"> <li class="one"> <li class="one"> <li class="one"> <li class="two"> <li class="two"> </ul> I want to add some style to the last li having class "one" (ie. third in the list). I tried following and it does not work. ul.test li.one:last-child That's not possible yet . :last-child selects the last child, regardless of the tag name, etc. The possible alternative, :last-of-type selects the last occurrence of a tag . It ignores the