Unordered List display

[Gemini23]

Can anyone help?

I have an unordered list of the type

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

In front of each name I have a bullet point showing - which I quite like...

However... within my list I would also like to be able to add a vertical line-space without the bullet point showing as below.. is this possible and how do I do it? it doesn't like me adding a <br />

<ul>
<li>Drinks</li>
<li>Tea</li>
<li>Milk</li>
<li> </> (I would like this to NOT show a bullet point...
<ul>
<li>Food</li>
<li>Biscuits</li>
<li>Bread</li>
</ul>

</ul>

[Staffa]

A suggestion:

<ul>
<li>Drinks</li>
<li>Tea</li>
<li>Milk</li>
<P>
<ul>
<li>Food</li>
<li>Biscuits</li>
<li>Bread</li>
</ul>

</ul>

[Marshall]

A <br> or <br /> (2 if necessary) may be better than a <p>
<li>Milk</li>
<br />
<li>Food</li>

Another option is add a style to the <li> you want space below:
<li style="margin-bottom: 10px;">TEXT</li>

[lucy24]

The <br> or <br /> or <p> or whatever you use has to be inside the preceding or following <li> unless you open and close the whole <ul>. (Lists behave like tables in this respect. They're a closed system ;))

Or you could say something like

li.break {margin-bottom: 1em;}

[zabalex]

the most fine way is to use css to display any kind of style to your page elements. if you do not want to display the bullet define ul as
ul {display:none}
for the li element just define
ul li {line-height:20px} the 20px could be any value that you think is suitable for keeping the line height. if you want a line to separate the li elements you can use in li border-bottom:1px solid #030303 or whatever color you want to show.

[alt131]

Hi Gemini, there should be no need to introduce another element for this: I'm not quite sure I understand your exact HTML structure. But for this:

<ul>
<li>Drinks</li>
<li>Tea</li>
<li>Milk</li>
<li class="nobullet"> </> (I would like this to NOT show a bullet point... <--don't close the </li>
<ul>
<li>Food</li>
<li>Biscuits</li>
<li>Bread</li>
</ul>
</li> <--- close <li> here
</ul>

adding the .nobullet class and the style rule .nobullet {list-style-type:none) should do it.

However note that means the nested list is sort of "hanging" with no connection to the main list. So another way would be:

<ul>
<li>Drinks</li>
<li>Tea</li>
<li>Milk <--don't close the </li>
<ul>
<li>Food</li>
<li>Biscuits</li>
<li>Bread</li>
</ul>
</li> <--- close <li> here
</ul>

That makes a direct connection between the sub-list and the item in the main list, and you can use
li ul {margin-top:1em/*adjust to suit*/}
(or even the adjacent sibling selector li + ul)

[Gemini23]

Okay.. I have gone with this.. and it displays okay...
<ul>
<li>milk</li>
<li>tea</li>
</ul>
<ul style="list-style:none">
<li>Biscuits</li>
<li>Cheese</li>
</ul>

[alt131]

Great you have a solution that works Gemini - but note that removes the bullet from the whole of the second list, rather than removing the bullet from just the list-item that contains the nested list.

[Gemini23]

There are some great suggestions here that can be implemented for different lists. Thanks!