Question

您好我刚刚创建了一个简单的列表，并希望它们以内联方式显示。

<ul id="inline_display" class="inline_display">
    <li><a href='../'>1</a></li>
    <li><a href='../'>2</a></li>
    <li><a href='../'>3</a></li>
</ul>

但是我试过了两次

.inline_display > ul > li > a {
  display: inline;
}

.inline_display  ul  li  a {
 display: inline;
}

但没有运气。

有人可以帮忙吗？提前谢谢。

Answer 1

尝试：

.inline_display  > li  {
  display: inline;
}

<强> jsFiddle example

在您的示例中，.inline_display > ul和.inline_display ul无法正常工作，因为没有<ul>元素是.inline_display的孩子。 .inline_display <ul>，因此您只需要定位其下方的元素。

Answer 2

选择器中有错误。 .inline_display已经完全是您的ul了，所以您只需要从选择器中删除ul：

.inline_display > li {
  display: inline;
}

但恕我直言，没有必要在这里应用子选择器＆＃34;＆gt;＆＃34;你可以选择这个变种

<强> CSS

.inline_display li {
  display: inline;
}

Answer 3

CSS中的错误。但它没有做你想做的事情

.inline_display > li > a {
  display: inline;
}

.inline_display li  a {
 display: inline;
}

如果你想要内联LI，你可以缩短它。如果您不将它们声明为块，则链接通常是内联的。

.inline_display li {dispaly: inline}

Answer 4

正确的语法是

ul.inline_display > li {
    display: inline;
}

或

ul#inline_display >  li {
    display: inline;
}

用于解决li

的直接子项ul

通过

.inline_display  ul  li  a {
    display: inline;
}

你正在解决这个问题

<div class='inline_display'>
    <ul>
      <li>
         <a> </a>
      </li>
    </ul>
</div>

Answer 5

首先，ID是唯一的，而类可以分配给多个DOM元素。

所以选择你的风格，将它命名为#inline_display，而课程将是.inline_display

第二：它不是内联锚，而是li。

所以：

 #inline_display li {
 display: inline;
}

CSS inline overriding li not working

5 个答案: