Question

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

我尝试将文本放在div中，但Subtext_1之后的所有内容都显示在块中。

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>

我想要这样的事情：

http://i.imgur.com/rAe2i6H.png

Answer 1

这是因为div是一个块级标签，你可以试试sub而不是

<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>

Answer 2

试试这个：

<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>

Answer 3

我相信这就是你需要的，如果我错了或弄错了，请纠正我。

 <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>

还要添加以下CSS代码：

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

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


span{
    font-size:0.7em;
}

检查小提琴：http://jsfiddle.net/fu66c6b4/

希望这有帮助。

Answer 4

Div是块级元素。对于这种情况，您需要内联元素。请尝试使用<em>标记（重点）或更通用的<span>标记。出于不同的目的，有许多不同的语义元素 - 你应该找到一个适合你的内容类型并使用它的。

有关完整列表，请参阅此页面： https://developer.mozilla.org/en/docs/Web/Guide/HTML/HTML5/HTML5_element_list#Text-level_semantics

Answer 5

＆＃13;

     <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>

＆＃13;

如何在列表中添加子文本？

5 个答案: