Question

所以我仍然在摸索这个设计，并且遇到了无序列表（ul）的问题。我试图在我的页面上设置一个水平滚动旋转木马，并需要图像排队。我将以下内容输入CSS：

ul {
  list-style-type: none;
  white-space: nowrap;
}

li {
  display: inline;
}

它完成了诀窍，图像现在是内联的，但是这也影响了导航栏，它影响了我运行的一些javascript。

如何将图像列表与导航列表分开？

提前致谢。

Answer 1

要扩展我的评论，请考虑2个UL：

<ul id="nav">
    <li>one</li>
    <li>two</li>
    <li>three</li>    
</ul>    

<ul id="pic">
    <li>Pic 1</li>
    <li>Pic 2</li>
    <li>Pic 3</li>    
</ul>

如果您使用原始CSS - 它会影响这两个项目，因为它们都是UL。但是如果你像这样定位特定的“pic”元素：

#pic {
  list-style-type: none;
  white-space: nowrap;
}

#pic li {
  display: inline;
}

这只会影响第二个元素。

演示：http://jsfiddle.net/3vRYA/

Answer 2

给他们一个类，无论是li本身还是封闭的ul / ol：

.MyListType1 {
  list-style-type: none;
  white-space: nowrap;
}


<ul class="MyListType1">

您可以在页面<ul id="MainNav">或您有多个<ul class="MiniLinks">的类中使用只包含其中一个的ID，然后使用哈希或点来引用它们。对于身份#MainNav {}。对于课程.MiniLinks {}。

Answer 3

ul {
  list-style-type: none;
  white-space: nowrap;
}

li {
  display: inline;
}

特别是你也可以使用它，现在不再影响或其他

<ul id="ul">
     <li class="li">Pic 1</li>   
</ul> 


    #ul, #ul > .li {
  list-style-type: none;
  white-space: nowrap;
  display: inline;
}

Answer 4

UL {
   保证金：0;
   填充：0;
}
ul li {
    display：inline-block;
    border：solid 1px #ccc;
    保证金权利：5px;
    身高：100px; / 可选的的/
    宽度：100px; / 可选的的/
}

如何区分CSS中的无序列表？

4 个答案: