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>

在上面的代码中，如何在下一行的<li>标记中显示一半文字？

Answer 1

＆＃13;

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

＆＃13;

只需将<br/>标记添加到您希望下一行开始的位置即可此外，如果您只想使用css，只需在样式中设置width:50%。

＆＃13;

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

＆＃13;

Answer 2

这是一个初学者级问题，<ul> <li>是一个块元素，除非您为父级或<ul>本身指定宽度 - 文字不会换行！ FYR，我只是为父<ul>指定宽度，您也可以为子<ul>指定宽度：

ul { 
    width: 200px;
}

Here is a fiddle example

我希望这有帮助！

如何在新行中显示<li>元素的一半文本

2 个答案: