Question

我有一个包含4个元素的无序列表。列表布局是水平的。整个列表需要排成一行。我希望前两个元素之间有一个间距f.e.边距10px。在第二个和第三个元素之间有一个较大的差距500px，第3个和第4个之间的间距与前两个元素之间的间距相同，因此为10px。

我试图在同一列表中添加2个不同的div和span。但随后，该列表被分为两行。我不知道要实现此目的要应用什么CSS样式。这是我正在谈论的列表：

product.location

nav li{
	display:inline;
	padding:0 20px;}

    nav{
	display:block;
	background-repeat: repeat;
	clear:both;
	background:#cbda0c;
	padding:33px;
}

Answer 1

在特定列表项上应用不同边距/填充的一种方法是使用:nth-child(..)选择器。请注意，我已经将您的两个列表合并为一个。

<nav>
  <ul>
    <li><a href="index.html">Startseite</a></li>
    <li><a href="anfahrt.html">Anfahrt</a></li>
    <li><img src="https://placekitten.com/25/25" /></li>
    <li><img src="https://placekitten.com/26/26" /></li>
  </ul>
</nav>

<style>
  nav li{
    display:inline;
    margin: 20px;
    padding: 10px;
    border: 1px solid red;
  }
  nav li:nth-child(3) {
    margin-left: 100px;
  }
</style>

在无序列表中应用不同的间距

1 个答案: