html-lists

问题 I am looking to make a two-column navigation bar by using a single <ul> with six <li> items: <nav> <ul> <li>Home</li> <li>About</li> <li>Team</li> <li>Store</li> <li>Blog</li> <li>Contact</li> </ul> </nav>​ Three elements on one side, and three on the other; ordered vertically. Right now, it's easy to do when making two seperate <ul> elements and putting padding/margins between them: http://jsfiddle.net/Baumr/SJcjN/ — but that's not a great solution. Could also wrap <span> tags around each

问题 I have this code here and I am trying to show the nested .submenu lists on ul#menu li hover events. If you can see the ul.submenu 's are inside the li 's but for some reason when you drag your mouse from the actual ul#menu li a to its nested ul.submenu it disappears, as if you are moving out of it. I do not understand why that happens. I have tried changing a bit the DOM as well as using setTimeout but with no luck. Any ideas of how to get this done? And more importantly... why my problem

问题 I have this code here and I am trying to show the nested .submenu lists on ul#menu li hover events. If you can see the ul.submenu 's are inside the li 's but for some reason when you drag your mouse from the actual ul#menu li a to its nested ul.submenu it disappears, as if you are moving out of it. I do not understand why that happens. I have tried changing a bit the DOM as well as using setTimeout but with no luck. Any ideas of how to get this done? And more importantly... why my problem

问题 I am really lost with trying to order an ul list by the span in the li. I have this next structure <ul id="videosList"> <li class="response1"> <a href="link"><img src="moon" /><span>Alex breaking bad</span> <li> <li class="response1"> <a href="link"><img src="moon" /><span>Jason playing piano</span> <li> <li class="response1"> <a href="link"><img src="moon" /><span>Jenny skying</span> <li> <li class="response1"> <a href="link"><img src="moon" /><span>Chuck norris</span> <li> <li class=

问题 How do you add styles to the HTML "start" attribute? I am unable to target the number even if I apply styles to the entire ordered list tag. //CODE: <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> OUTPUT: Coffee Tea Milk 回答1: You can use the counter-reset and counter-increment properties for this. You have to use the :before pseudo element on the list items though. Here is an example. First you have to start the counter. You can do that with the counter-reset property. ol {

问题 I have a nested unordered list which has main content on the left, and I would like to add options which are floated right, such that they are aligned on the right regardless of the level of indentation. <ul> <li> Item 1 <span class='options'> link </span> </li> <li> Item 2 <span class='options'> link </span> <ul> <li>Item 3 <span class='options'> link </span> </li> </ul> </li> </ul> I have the following css: ul { list-style: none; padding: 0; margin: 0; } li { padding-left: 15px; width:

问题 Trying to use JQuery to scroll through a ul li list using class next and class prev e.g. <ul class="selectoption"> <li> Item 1</li> <li> Item 2</li> <li> Item 3</li> <li> ... </li> </ul> <a href="" class="next">Next</a> <a href="" class="prev">Back</a> Only thing is I only want the selected li to be visible. So somehow need to index the li's? Help much appreciated - thanks in advance 回答1: This should do it: // Hide all but the first $('.selectoption li').not(':first').hide(); // Handle the

问题 I'm having issues with the IE7 list element bugs. The bullets (or numerals) of and are being shown outside of the margin. How do I fix this for IE? From what I've read this seems to be a problem when specifying the height/width in an IE7 li. Images can be found here: Firefox: IE7: I have a stylesheet with the Meyer reset. #create_request li { display: list-item; width: 313px; height: 23px; background-color: #E3E3E3; list-style: decimal; list-style-position: inside; padding-left: 25px; padding

问题 I cannot get an ordered list to show proper indenting. The numbers are all aligned to the right. So the browser (Chrome) shows a space before the single digit numbers and only aligns the double digit numbers correctly to the left. How can I output a nice ordered list where the numbers are all aligned to the left and the list items all start below each other? 回答1: Actually, the solution is pretty simple, just set ol {list-style-position: inside;} And your numbers should "align to the left"

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 6 years ago . I have a string eg: $string = "word1,word2,word3,word4"; I need to echo this into <li> elements using PHP. So $string becomes: <li>word1</li> <li>word2</li> <li>word3</li> <li>word4</li> 回答1: Like this: $string = "word1,word2,word3,word4"; $string = explode(",",$string); foreach ($string as $str) { echo "<li>".