CODEWITHSUNDEEP
html
Display name
Display name

Reputation: 67

How can I add subtext in list?

http://fiddle.jshell.net/stealthpancakes/jvrqhxdk/5/

I tried to put text in div, but everything after Subtext_1 is displayed in block.

Upper_text_1
Subtext_1
Upper_text_2 Upper_text_3


<nav>
    <ul>
        <li><div>Upper_text_1</div><div>Subtext_1</div></li>
        <li>Upper_text_2</li>
        <li>Upper_text_3</li>
    </ul>
</nav>

I want something like this:

https://i.sstatic.net/Oxinu.png

Upvotes: 0

Views: 2337

Answers (5)

ThanosFisherman
ThanosFisherman

Reputation: 5859

     <nav>
        <ul>
            <li>Upper_text_1</li>
             <sub>Subtext_1</sub>
            <li>Upper_text_2</li>
             <sub>Subtext_2</sub>
            <li>Upper_text_3</li>
             <sub>Subtext_3</sub>
        </ul>
    </nav>

Upvotes: 0

Venkata Krishna
Venkata Krishna

Reputation: 1776

I believe this is what you need, correct me if am wrong or mistaken.

 <nav>
        <ul>
            <li><p>Upper_text_1<br/><sub>Subtext_1</sub></p></li>
            <li><p>Upper_text_2</p></li>
            <li><p>Upper_text_3</p></li>
        </ul>
    </nav>

Also add the below CSS code:

nav ul li{
    margin: 5px;
    display:inline;
}

li p
{
     display:inline;
    float:left;
    margin: 10px;
}


span{
    font-size:0.7em;
}

Check the fiddle: http://jsfiddle.net/fu66c6b4/

Hope this helps.

Upvotes: 0

Debasish Pothal
Debasish Pothal

Reputation: 407

That is because div is a block level tag, you can try sub instead

<nav>
    <ul>
        <li>Upper_text_1<br /><span>Subtext_1</span></li>
        <li>Upper_text_2<br /><span>Subtext_2</span></li>
        <li>Upper_text_3<br /><span>Subtext_3</span></li>
    </ul>
</nav>

Upvotes: 2

Joel Cox
Joel Cox

Reputation: 3469

Div is a block level element. You want an inline element for this case. Try <em> tag (emphasis) or the more generic <span> tag instead. There is a lot of different semantic elements for different purposes - you should find one that fits your content type and use that.

See this page for a full list: https://developer.mozilla.org/en/docs/Web/Guide/HTML/HTML5/HTML5_element_list#Text-level_semantics

Upvotes: 0

Rana Soyab
Rana Soyab

Reputation: 896

Try this :

<nav>
    <ul>
        <li><div>Upper_text_1<span>Subtext_1</span></div></li>
        <li>Upper_text_2</li>
        <li>Upper_text_3</li>
    </ul>
</nav>

Upvotes: 0

Related Questions