CODEWITHSUNDEEP
html
Julien Mazars
Julien Mazars

Reputation: 1192

New line after <li> bullet

I have a strange behaviour I can't explain: when I'm writing an easy html file with a <li> tag followed with a header (or any tag actually), I have a linebreak between the bullet and the content...

Here is a quick example:

<h1>Title</h1>
    
    <li>
    	<h1>First topic</h1>
    	<p>Bla bla bla</p>
    </li>
    <li>
    	<h2>Second topic</h2>
    	<p>Bla bla bla</p>
    </li>

Upvotes: 0

Views: 5940

Answers (4)

user5260143
user5260143

Reputation: 1098

I think it is becouse of you used H1 element. This element is block element, it move line automatically. try to use span insread or force the h1 element to be inline element by any css, like:

h1{

     display:inline;
}

Upvotes: 0

Anson W Han
Anson W Han

Reputation: 409

Valid html does require either an <ol> or <ul> wrapper around your <li>s. However the "extra line spacing" that you are observing between list elements is likely inherent top margins on the <h1> and <h2> elements or bottom margin on the <p> tags. You can remove that spacing by adding css to eliminate top and bottom margin or padding around those elements when nested in an <li>

An example of such css might be:

li p, li h1, li h2 {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

Ideally, you should add classes to target and style the elements so you don't inadvertently change the margins and padding page/site wide.

Upvotes: 2

law rence
law rence

Reputation: 179

I think you need to put unordered list tags before your list items tags? for example:

<ul>
  <li>Text</li>
  <li>text</li>
  <li>Text</li>
</ul>

Upvotes: 1

Wouter Brink
Wouter Brink

Reputation: 33

<h1>Title</h1>
    
<ul>        
    <li>
    	<h1>First topic</h1>
    	<p>Bla bla bla</p>
    </li>
    <li>
    	<h2>Second topic</h2>
    	<p>Bla bla bla</p>
    </li>
</ul>

Check this for more a bit more information about lists in HTML.

Upvotes: 1

Related Questions