Question

在CSS中，我将li设置为display: inline;。我了解<li>和</li>之间的任何内容都将内联显示。但是，我想要一些非内联的列表元素。我尝试在页脚周围创建一个<div>并在其中写上display: inline;，但是出现项目符号点。我如何保持页脚内联，但对其余li元素所希望的内容拥有自由？

的HTML

<div id="footer">
   <p>
   <ul>
      <li><a href="index.html>Home</a></li>
      <li><a href="about.html>About</a></li>
      <li><a href="etc.html>Etc</a></li>
   </ul>
   </p>
</div>

...

<p> Lorem ipsum dolor sit amet </p>
<ol>
     <li> consectetur adipiscing elit </li>
     <li> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </li>
</ol>

CSS

li {
display: inline;
font-size: 1em;
margin-right: 10px;
}

#footer {
position: absolute;
bottom: 0;
height: 60px;
width: 100%;
text-align: center;
}

我想创建一个非内联的列表。我尝试将display: inline;部分移到#footer，但页脚中有项目符号。如何保持页脚的格式但仍创建非内联列表？

Answer 1

您可以使用 Descendant Combinator 定义CSS选择器，由空白表示。如果将选择器设为A B，则括号内的样式将应用于B元素内的所有A元素。

对于您来说，您可以使用以下CSS：

#footer li {
display: inline;
font-size: 1em;
margin-right: 10px
}

#footer {
position: absolute;
bottom: 0;
height: 60px;
width: 100%;
text-align: center
}

这是将样式应用于ID为li的元素内的所有#footer元素的方法。

有关selectors的更多信息

有关descendant combinators的更多信息

如何仅将<li> css应用于页脚而不是其他内容？

1 个答案: