我有一个代码，我试图以内联方式显示列表中的所有内容，但第一个元素显示在一行中，之后所有其他元素显示在另一行中。我对这个问题感到困惑。这是我的代码，
<ul style="display:inline; list-style-type: none;">
<li style="background:url("no-color.png") repeat !important; padding:5px; display:inline;"> FEATURED</li>
<li style="background:none repeat scroll 0 0 rgba(255, 57, 65, 0.9) !important;padding:5px;display:inline;">IPHONE4S </li>
<li style="background:none repeat scroll 0 0 rgba(255, 103, 57, 0.9) !important;padding:5px;display:inline;">APPLE STOCKS </li>
<li style="background:none repeat scroll 0 0 rgba(255, 218, 57, 0.9) !important;padding:5px;display:inline;">IPAD HD </li>
<li style="background:none repeat scroll 0 0 rgba(193, 241, 78, 0.9) !important;padding:5px;display:inline;">ITUNES </li>
<li style="background:none repeat scroll 0 0 rgba(29, 195, 246, 0.9) !important;padding:5px;display:inline;">STEVE JOBS </li>
<li style="background:none repeat scroll 0 0 rgba(29, 195, 246, 0.9) !important;padding:5px;display:inline;">ICLOUD</li>
</ul>
</p>
此外，您可以在 jsfiddle 上看到它.
请帮助我如何在一行中显示所有内容。谢谢
最佳答案
我查看了您的 jsfiddle 并解决了它。改变
<li style="background:url("no-color.png") repeat !important; padding:5px; display:inline;"> FEATURED</li>
到
<li style="background:url('no-color.png') repeat !important; padding:5px; display:inline;"> FEATURED</li>
检查 demo
关于css - 显示内联列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9724481/