How would you create an unordered list of items in HTML5 with a group name at the top? The items should look indented.
Ex:
GroupName1
Item1
Item2
Item3
GroupName2
Item4
Item5
Why not just do a list within a list?
<ul>
<li>
Group 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
Group 2
<ul>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
</ul>
I reckon scurker’s answer is the way to go, but if your groups were really separate from each other, and thus didn’t really make sense in one big list, you could do this:
<section>
<h1>GroupName1</h1>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</section>
<section>
<h1>GroupName2</h1>
<ul>
<li>Item4</li>
<li>Item5</li>
</ul>
</section>
Related
How do I hide the drop-down button to the hover or click to display it? I specifically use foundation zurb plugin. Look my code:
HTML:
<ul class="menu" data-drilldown data-back-button='<li class="js-
drilldown-
back"><a class="new-back"></a></li>'style="width: 200px" id="m1">
<li>
Item 1
<ul class="menu">
<li>
Item 1A
<ul class="menu">
<li>Item 1Aa</li>
<li>Item 1Ba</li>
<li>Item 1Ca</li>
</ul>
</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li>
Item 2
<ul class="menu">
<li>Item 2A</li>
<li>Item 2B</li>
<li>Item 2C</li>
</ul>
</li>
</ul>
The code doesn't mean much to you if you haven't used the drill dropdown foundation zurb plugin.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
<html>
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li>Here how can i make this li to display half contents in new line</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>
</html>
Here, in the above code, how can I display half the text in the <li> tag in next line?
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li>Here how can i make this li to <br/> display half contents in new line</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>
Just add the <br/> tag where you want the next line to start.
Also if you want to do it using only css just make width:50% in the styling.
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li style="width:50%;">Here how can i make this li to display half contents in new line</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>
This is a beginner level question, an <ul>'s <li> is a block element, unless you assign a width to the parent or the <ul> itself - text won't wrap! FYR, I just assign width to parent <ul>, you can assign a width to the child <ul>, too:
ul {
width: 200px;
}
Here is a fiddle example
I hope this helps!
I need to come as close to the example below, using only html. I can get the top level numbered list and the next level of bullet points, but can't figure out how to get the most-indented level of bullet points.
If it can be done, please tell or point me to correct syntax. Thanks!
I've had to use "_"s to get the formatting to look right in the preview.
Top level point
_• A subsidiary point
___• Sub point
_• Next subsid. point
Next top level point
if I understood your question, I think this is what you are looking for: jsfiddle
<ol>
<li>List item one</li>
<ul>
<li>Subitem 1</li>
<ul>
<li>Sub-Subitem 1</li>
</ul>
<li>Subitem 2</li>
</ul>
<li>List item two with subitems:</li>
</ol>
I guess this may help
<ol>
<li>Outer 1
<ul type="disc">
<li>Inner 1
<ul type="disc">
<li>Sub Inner 1 </li>
</ul>
</li>
<li>Inner 2</li>
</ul>
</li>
<li>Outer 2</li>
</ol>
try this
<ol>
<li>item 1</li>
<li>item 2
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3
<ul>
<li>sub-Subitem 1</li>
<li>sub-Subitem 2</li>
</ul>
</li>
</ul>
</li>
<li>item 3</li>
<ol>
<li>
Top level point
<ul style="list-style: disc;">
<li>
A subsidiary point
<ul style="list-style: disc;">
<li>Sub point</li>
</ul>
</li>
<li>Next subsid. point</li>
</ul>
</li>
<li>Next top level point</li>
How's this? Should be exactly what you described.
http://jsfiddle.net/hqtj1cvL/7/
Is this what you looking for??
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
<ul>
<li>one</li>
<li>two</li>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<li>three</li>
</ul>
<li>four</li>
</ol>
How can I place a div in between two list items, adding a margin on both sides?
Here is the layout I am trying to achieve: Link to Image
Below is the code I am trying to use to make this happen.
<div id="logo">
Logo Image
</div>
<div id="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
Is there a way to do this without adding individual styles to the 2nd and 3rd list items? That's the only way I can think of doing this.
Get rid of the <div>, and give the <li> that you would want the <div> in its class:
http://jsfiddle.net/charlescarver/jTYnW/
<div id="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li id="logo">
Logo Image
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
You can try with this code
<ul>
<li>
<div>test</div>
</li>
<li>
<div>test</div>
</li>
<li class="specific">
<div>test</div>
</li>
<li>
<div>test</div>
</li>
</ul>
Adjust css to div
Is this HTML structure valid?
<ul class="blog-category">
<div class="three column">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</div>
<div class="three column">
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</div>
<div class="three column">
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</div>
</ul>
I am inserting li's inside div which is within ul. What do you think? Is this stucture semantically valid and will that be recognized as a single list?
No, div is not allowed as a direct child of ul. Whenever you're in doubt, validate your page with W3C or check the corresponding article on W3C:
4.5.6 The ul element
Categories
Flow content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Zero or more li elements.
Content attributes:
Global attributes
DOM interface:
interface HTMLUListElement : HTMLElement {};
Instead you could use
<ul class="blog-category">
<li class="three column">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="three column">
<ul>
<li>Item 4</li>
...
</ul>
</li>
</ul>
<div>'s aren't technically valid inside of <ul>'s. W3 validator returns this result:
Element div not allowed as child of element ul in this context
It would make more sense to group the code you have different, such as:
<div class="blog-category">
<ul class="three-column">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</div>
No, this is not valid, neither in HTML4, nor in XHTML or in HTML5.
If you'll validate this against the w3c markup validator you'll probably get something like:
Element div not allowed as child of element ul
More about lists can be found here.
It is valid also do the following:
<ul>
<li>
<div>Title</div>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li>
<div>Title</div>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
I've checked in http://validator.w3.org/check