html-lists | 易学教程

Ordered list CSS style includes parent number

阅读更多关于 Ordered list CSS style includes parent number

问题 We're looking to use CSS to create an ordered list that looks like this: A. A.1 A.2 B. C. C.1 C.2 C.2.1 C.2.2 How would you include the parent index in the child like this? 回答1: You should use CSS counters W3C specs ( as @Zeta ) has pointed out, but here is an approach that will handle multiple nesting and latin counters .. ol{ list-style: none; } ol.roman{ counter-reset: roman; } ol.roman > li:before{ counter-increment: roman; content: counter(roman, upper-latin)"."; padding-right:5px; } ol

One UL list split into multi columns with fixed height

阅读更多关于 One UL list split into multi columns with fixed height

问题 I would like to create one UL list that will contain a variable number of LI elements. I would like the heigh of the container to be max 500px. Which means if i have more li elements that go over that 500px height i want it to turn into 2 columns. If there is more then can fit for 2 columns i would like it to turn into 3 columns. I have enough space to fix max 5 columns and the data will never go over that amount. Any idea how i can do this? Any jquery, css tricks? or do i need to handle each

CSS UL LI Vertical Menu

阅读更多关于 CSS UL LI Vertical Menu

问题 <%@ Page Language="C#" AutoEventWireup="true" Theme="SF" CodeBehind="ULLITest.aspx.cs" Inherits="ClickDoors_WebApp.ULLITest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> #Menu { padding:0; margin:0; list-style-type:none; font-size:13px; color:#717171; width:100%; } #Menu li { border-bottom:1px solid #eeeeee;

Get the list of attributes of a HTML string using Javascript

阅读更多关于 Get the list of attributes of a HTML string using Javascript

问题 How can I get the list of attributes of an HTML string using Javascript? Here's my code so far. function traverse_test(){ var root=document.getElementById('arbre0').childNodes; for(var i=0;i<root.length;i++){ var lis = root[i]; if (lis =='[object HTMLUListElement]') { for (var member in lis) { if (typeof lis[member] == "string") { var assertion = lis[member]; var resultat = assertion.search(/..Bookmarks/); if (resultat != -1) { output.innerHTML+= lis[member]; // Here I'd like to have the list

Is it semantically correct in HTML to markup a list with only a single list item?

阅读更多关于 Is it semantically correct in HTML to markup a list with only a single list item?

问题 Is it semantically correct to markup a ul in HTML with another embedded ul that has only one single list item? For example, I have a ul with several li s, and one of those li s has an embedded ul with a single li : <ul> <li>Example LI 1 <ul> <li>Example LI 1a</li> </ul> </li> <li>Example LI 2</li> <li>Example LI 3</li> </ul> 回答1: Absolutely. A list is not defined by quantity. It's defined by semantics. So a list can consist of only one element if only one item applies to the list's purpose.

<li> elements with adapted width

阅读更多关于 elements with adapted width

问题 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%. 回答1: 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

Cascading <li>-hover effect using CSS [duplicate]

阅读更多关于 Cascading -hover effect using CSS [duplicate]

问题 This question already has answers here : How to hover only the current li in nested ul? (4 answers) Closed last year . 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

present lists and sublists in html

阅读更多关于 present lists and sublists in html

问题 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 回答1: 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

How can I click a <li> item with Greasemonkey?

阅读更多关于 How can I click a item with Greasemonkey?

问题 <ul class="myList clearfix" id="thismyList"> <li class="myBullet" id="answer1">blabla1</li> <li class="myBullet" id="answer2">blabla2</li> <li class="myBullet" id="answer3">blabla3</li> </ul> In this page, how can I automatically click item blabla2 ? 回答1: The shortest and most powerful is probably the XPath way (btw - it's one of the few w3 specifications that are actually a very good and helpful read). You can have almost any conditions you want to have. var xresult = document.evaluate("//*

height: auto does not work on <li> elements

阅读更多关于 height: auto does not work on elements

I've been trying to fix this layout problem for an hour or so with no luck. I simply want my li to expand to match the height of its contents, so that margin-bottom will work correctly. Here's my code (note: this is just a draft, so the relevant CSS is mixed in via style attributes):  <h2>Related</h2> <ul class="list-unstyled owner-list"> @foreach (var package in Model.RecommendedPackages) { <li style="position: relative; word-break: break-all; height: auto;"> <a href="@Url.Package(package.Id)" title="@package.Id"