html-lists | 易学教程

PHP Multidimensional array to unordered list, building up url path

阅读更多关于 PHP Multidimensional array to unordered list, building up url path

问题 I have a multidimensional array in PHP produced by the great examples of icio and ftrotter (I am use ftrotterrs array in arrays variant): Turn database result into array I have made this into a unordered list width this method: public function outputCategories($categories, $startingLevel = 0) { echo "<ul>\n"; foreach ($categories as $key => $category) { if (count($category['children']) > 0) { echo "<li>{$category['menu_nl']}\n"; $this->outputCategories($category['children'], $link , $start,

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? Gabriele Petrioli 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.roman li ol{ counter-reset: inner; } ol.roman ol li:before{ counter-increment: inner;

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 scenario server side to do this. Example 1 list entry list entry list entry list entry list entry list

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; padding:7px 10px 7px 10px; } #Menu li:hover { color:White; background-color:#ffcc00; } #Menu a:link {

Sorting li elements by class with jQuery

阅读更多关于 Sorting li elements by class with jQuery

I'd like to reorder li elements through an array with jQuery My list code looks like this: <html> <head> <script src="list.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="list"> <ul class="xyz"> <li class="element1">content for 1</li> <li class="element2">content for 2</li> <li class="element3">content for 3</li> </ul> </div> </body> </html> I now want to reorder the DOM elements through an array. I tried, but I don't get it running: var array = ['element2', 'element1', 'element3']; $.each

How to keep <li> elements on single line in fixed width <ul>?

阅读更多关于 How to keep elements on single line in fixed width ?

I've a header div and a menu ul below it. I'd like to accomplish 2 things: 1) the ul should have the same width as the div (outer vertical borders exactly same x position 2) I'd like to keep the spacing between li elements roughly equal With some trial and error on the li 's margins and padding I roughly achieved the first point in Google Chrome (please see this jsfiddle ) but in Firefox the li 's don't fit in the ul so they don't stay on a single line. Also, the last li tends to 'spill over' to a second line when zooming in/out. I tried it with margin:5px auto and padding:5px auto on the li

Skip ordered list item numbering

阅读更多关于 Skip ordered list item numbering

问题 I have an ordered list and I'd like to skip the number output from a particular item. Traditional output: 1. List item 2. List item 3. List item 4. List item 5. List item Desired output: 1. List item 2. List item Skipped list item 3. List item 4. List item 5. List item Is this achievable in CSS? I discovered an <ol> "start" attribute that I didn't know about before, but doesn't seem to help me. 回答1: Another option is to use CSS3 counters: demo HTML <ul> <li>One</li> <li>Two</li> <li class=

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 of lis[member] attributes for(var attr in lis[member].attributes) { output.innerHTML+=lis[member]

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> 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. For example, I have only crashed one computer today so that list would be only one element long. Yes, it is

How can I get a <ul> to be evenly spaced across the content area it exists in?

阅读更多关于 How can I get a to be evenly spaced across the content area it exists in?

I have a List that I'm using as a list of tabs: <div id="SearchForm"> <ul class="TabControl"> <li> <a href="/search/Funds">Funds (60)</a> </li> <li> <a href="/search/Companies">Companies (4)</a> </li> <li> <a href="/search/Groups">Groups (1)</a> </li> <li> <a href="/search/Categories">Categories (0)</a> </li> <li> <a href="/search/Categories">Identifiers (60)</a> </li> </ul> </div> where the CSS is defined as follows: #SearchForm ul { list-style: none; padding:0; margin: 15px 0 5px 0; } #SearchForm li { display: inline; background-color: #F6E9D8; margin: 12px 6px 0 0; padding: 6px 0 6px 0; }