Question

我有一个代码，我试图在列表中显示内联的所有内容，但第一项显示在一行中，之后所有其他项目显示在其他行中。我对这个问题很困惑。这是我的代码，

 <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上看到它。

请帮助我如何在一行中显示所有内容。感谢

Answer 1

我看着你的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

Answer 2

列表项不应列在列表中。

您的代码完美，只需稍加更新

ul li { display: inline; }

检查demo

Answer 3

您的第一个li中的引号存在问题。你可能应该把风格放在另一个文件上：http://jsfiddle.net/JJEZS/

Answer 4

您尝试使用后台url("")功能将背景更改为图片，但您忘记了自己属于HTML的style=属性，因此第一个{{1关闭样式元素，而不会到达"部分。

将引号更改为单引号display: inline会有所帮助。

内联显示列表

4 个答案: