在ul li中添加sup标签到下一行

Question

我尝试用新标签制作一个列表。文字较少时就可以了。但如果文字更多，我的新标签会出现在下一行。我的代码如下：

<ul>
   <li> text 1 <sup>new</sup> </li>
   <li> text 1 <sup>new</sup> </li>
   <li> text 1 <sup>new</sup> </li>
   <li> large text <sup>new</sup> </li>
</ul>

jsfiddle

我是如何解决这个问题的。

Answer 1

问题在于向ul添加宽度，请参阅下面的小提琴。

Fiddle

您可以删除ul li { width: 100%; } 或简单添加的宽度，如下所示。

<强> CSS

for (int i = 1; i < n; i++) {
    int j = i;
    while (j < n) {
        do operation with cost O(j)
        j = j * 3;
    }
}

Answer 2

将宽度值更改为：100％;

 ul {
      width: 100%;
    }
    ul li {
      width: 100%;
    }

Answer 3

将max-width设置为li Demo

CSS

li {
    max-width: 62px;
}

Answer 4

在没有width属性的情况下运行良好：

https://jsfiddle.net/pfsonm8d/7/