how to do the next thing in html by using ul and li: Category1 Category2 Category3 50 30 10 I want to set a inline display list but below each element from the list appear a number.... how to do that?
Uhm... I'm not sure that's a list... almost looks like tabular data, but I'd need to see a larger data set and a bit more... English an explanation of what you are trying to do.
<ul> <li> <div class="category-name">Category1</div> <div class="category-number">50</div> </li> <li> <div class="category-name">Category2</div> <div class="category-number">30</div> </li> <li> <div class="category-name">Category3</div> <div class="category-number">10</div> </li> </ul> HTML: For the css style, make the li a block element with text align center.
That is horrific why would you consider putting a div inside a list, that defeats the object of what lists are for! If you were to style it, you'd style the ul, li instead of adding another pointless element. As deathshadow said, it's tabular data which belongs in a table.
And if it was literally just those 2 rows you should use a proper heading i.e. <h> tag for the title and a <p> for the data in order to make sure the page is structured correctly. It is hard to tell though without a little more info.
check out this other horrible code: http://twitter.github.io/bootstrap/components.html#thumbnails Yup, divs inside list. It's called Twitter bootstrap, a widely accepted and popular web design framework. op clearly states he wants an inline list - that means it's horizontal commonly used in navigation menus. where did tables get in the mix?
who says you cant put divs in a list? can you share your source? A div is just an empty container. last i checked this is valid markup. why put it in an h tag if its not header. why a p tag if its not a paragraph. Seems to me you're the one with horrible code.
It's not that you can't, it's just that semantically it's a bit wonky. I'd be using just ONE span, without any classes since that's some really pointless code you've got there. <ul class="whatever"> <li>Category1 <span>50</span></li> <li>Category2 <span>30</span></li> <li>Category3 <span>10</span></li> </ul> Code (markup): The category doesn't need any steenking DIV since you can style it off the parent, the data is then easily targeted by the only span in the markup using the parent element's class; and since we have a perfectly good class on the parents, we don't need one on ANY of the child elements. Keeping them a single line when CSS is off makes more sense too since the result otherwise is... well... it feels wrong. Just set the span to display:block, float the LI, set wrapping behavior on the UL, done. From a semantics standpoint I'd consider using a definition list, but really this LOOKS like tabular data even if there is only one row of data. It's headings and values that should have a semantic relationship -- likely using TH, THEAD, TBODY and SCOPE. It's not a list, it's tabular data. This is bloated/more code, but it retains a semantic relationship that feels a lot closer to what the data means than numbered headings, or semantically neutral tags like DIV/SPAN would convey. <table class="whatever"> <thead> <tr> <th scope="col">Category1</th> <th scope="col">Category2</th> <th scope="col">Category3</th> </tr> </thead><tbody> <tr> <td>50</td> <td>30</td> <td>10</td> </tr> </tbody> </table> Code (markup): That would at least have a semantic relationship between the headings and the data... though I'd probably also have a TH in TBODY to say what that row of numbers actually means... and of course a caption to say what the whole table is. As to nitwitter bootstrap, that steaming pile of bloated maggot infested manure is NOT something you should hold up as a way of building jack ****! Just because all the other lemmings go and run off a cliff... The minute you put a numbered heading or pretty much a block level container in any sort of list, you've got redundant semantics and most likely some form of code bloat... since a numbered heading indicates the start of a subsection of the page (as does HR) it's redundant to break them into subsections with tags like LI... or any of the HTML 5 asshattery like NAV, SECTION, ARTICLE, ASIDE, etc, etc... Though I'm with you guys on using a numbered heading and paragraphs -- what the blue blazes would make two digit numbers a flow/content paragraph?!? That's just as goofy as stuffing IMG or just one or two words into a P. I could ALMOST see using numbered headings, but really I don't think these categories warrant heading navigation / section breaks.
I find a lot of this. Its data that belongs in a table. Put it in a table. There isnt anything wrong with a table, when its got data thats meant to be in a table in it.
Has the Twitter Bootstrap changed much since the last time I saw it? I'm no expert but using <b> <i> tags is an excellent example of valid semantic markup. <h3> for a title tag. The list could go on forever, but even (just downloaded latest version) the boostrap.css file contains silly items, here are a few: .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } Code (markup): ul, ol { padding: 0; Code (markup): img { max-width: 100% !important; } Code (markup): Plus the fact, it's pretty instantly recognizable that you have used Bootstrap because you wanted to create a quick half-assed bloated website.
If I were to do it in list only, like put the first three elements as list and the last three elements as list too, I would have probably done this: <style> ul.mylist{ width:300px; margin:0px; padding:0px; float:left; list-style:none; } ul.mylist li{ width:100px; margin:0px; padding:0px; float:left; text-align:center; } </style> <ul class="mylist"> <li>Category 1</li> <li>Category 2</li> <li>Category 3</li> <li>50</li> <li>30</li> <li>10</li> </ul> HTML:
See, that's even worse because then there's NO relationship between the two rows whatsoever. If there is a columnar relationship between the numbers and the text above them, that would just be gibberish from a semantic markup point of view; wrong meaning around elements is as bad/useless as no meaning -- you might as well just make them all SPAN at that point for all the accessibility/usefulness that provides.
The reason why I came up with the code snippet above was because the fellow poster wanted it to be in a list without specifying which element he wanted to attach to what category. I agree the method I have written is stupid but still, that serves the purpose..