CODEWITHSUNDEEP
htmlcss
Paul Erlenmeyer
Paul Erlenmeyer

Reputation: 521

Apply different spacing within an unordered list

I have an unordered list with 4 elements. The list layout is horizontal. The whole list needs to be layed out in one line. I want the first two elements to have one spacing f.e. margin 10px. Between the 2nd and 3rd element a big gap of f.e. 500px and between the 3rd and 4th the same spacing like between the first two elements, so 10px.

I tried to add 2 different divs and spans within the same list. But then the list gets layed out in two rows. I don't know what css style to apply to achieve this. Here is the list I am talking about:

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>

Upvotes: 0

Views: 38

Answers (1)

cherouvim
cherouvim

Reputation: 31903

One way to apply different margin/padding on a specific list item, is by using the :nth-child(..) selector. Note that I've merged your two lists into one.

<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>

Upvotes: 1

Related Questions