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

Question

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

我试图在同一个列表中添加 2 个不同的 div 和 span。但是随后列表被分成两行。我不知道要应用什么 css 样式来实现这一点。这是我正在谈论的列表:

nav li{
	display:inline;
	padding:0 20px;}

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

<nav>
			<ul>
				<li>
					<a href="index.html">Startseite</a>
				</li>

				<li>
					<a href="anfahrt.html">Anfahrt</a>
				</li>
			</ul>
			<ul>
				<li>
					<img src="./images/ger.png" alt="pp" width=7% height=7%>
				</li>

				<li>
					<img src="./images/rus.png" alt="pp" width=7% height=7%>
				</li>
			</ul>
	</nav>
    

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>