CODEWITHSUNDEEP
htmlcss
user1532669
user1532669

Reputation: 2378

Display unordered list elements in correct order

I've got a very simple CSS problem, which I'm getting nowhere with.

I'm expecting the header-right div to be displayed like this:

a b c d

Instead it shows like this:

d c b a

How do I get this aligned in the order I expect?

    ul li{
      display: inline;
      list-style: none;
    }

    a {
        text-decoration: none;
    }

    #header {
     width: 100%;
    }

    #header-left li {
      float: left;
    }

    #header-right li {
      float: right;
      margin-right: 25px;
    }
 <div id="header">
    <div id="header-left">
      <ul>
        <li><a href="/">Brand</a></li>
      </ul>
    </div>
    <div id="header-right">
      <ul>
        <li><a href="/a">a</a></li>
        <li><a href="/b">b</a></li>
        <li><a href="/c">c</a></li>
        <li><a href="/d">d</a></li>
      </ul>
    </div>
  </div>

Upvotes: 0

Views: 419

Answers (3)

hungerstar
hungerstar

Reputation: 21685

That's because you are floating the li to the right. The browser starts floating elements in the order it sees them. What that means is: a gets moved to the right, then b gets moved to the right, then c, and finally d.

Float your ul instead.

ul li {
  display: inline;
  list-style: none;
}

a {
  text-decoration: none;
}

#header-left ul {
  float: left;
}

#header-right ul {
  float: right;
  margin-right: 25px;
}
<div id="header">
  <div id="header-left">
    <ul>
      <li><a href="/">Brand</a></li>
    </ul>
  </div>
  <div id="header-right">
    <ul>
      <li><a href="/a">a</a></li>
      <li><a href="/b">b</a></li>
      <li><a href="/c">c</a></li>
      <li><a href="/d">d</a></li>
    </ul>
  </div>
</div>

You could also use flexbox to solve this problem.

ul li {
  display: inline;
  list-style: none;
}

a {
  text-decoration: none;
}

#header {
  display: flex;
  
  /* Pushes #header-left and #header-right to the outside edges of #header. */
  justify-content: space-between; 
}

#header-right ul {
  margin-right: 25px;
}
<div id="header">
  <div id="header-left">
    <ul>
      <li><a href="/">Brand</a></li>
    </ul>
  </div>
  <div id="header-right">
    <ul>
      <li><a href="/a">a</a></li>
      <li><a href="/b">b</a></li>
      <li><a href="/c">c</a></li>
      <li><a href="/d">d</a></li>
    </ul>
  </div>
</div>

Upvotes: 2

Kyle
Kyle

Reputation: 1043

Your float right on the li is your issue. This will fix it:

ul li {
  display: inline;
  list-style: none;
}

a {
  text-decoration: none;
}

#header {
  width: 100%;
}

#header-left li {
  float: left;
}

#header-right {
  float: right;
}

#header-right li {
  margin-right: 25px;
}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105883

do not float lis, only ul : 

ul li{
  display: inline;
  list-style: none;
}

a {
    text-decoration: none;
}

#header {
 width: 100%;
}

#header-left  {
  float: left;
}

#header-right  {
  float: right;
  margin-right: 25px;
}
<div id="header">
<div id="header-left">
  <ul>
    <li><a href="/">Brand</a></li>
  </ul>
</div>
<div id="header-right">
  <ul>
    <li><a href="/a">a</a></li>
    <li><a href="/b">b</a></li>
    <li><a href="/c">c</a></li>
    <li><a href="/d">d</a></li>
  </ul>
</div>

grid or flex will do the job too :

ul li {
  list-style: none;
  margin-right:25px;
}

a {
  text-decoration: none;
}

#header, #header-right ul {
  display: flex;
}

#header-right {
  margin-left: auto;
  margin-right: 25px;
}
<div id="header">
  <div id="header-left">
    <ul>
      <li><a href="/">Brand</a></li>
    </ul>
  </div>
  <div id="header-right">
    <ul>
      <li><a href="/a">a</a></li>
      <li><a href="/b">b</a></li>
      <li><a href="/c">c</a></li>
      <li><a href="/d">d</a></li>
    </ul>
  </div>

Upvotes: 0

Related Questions