Why won't my two unordered lists display inline?

Question

I'm running into some issues with trying to get a header bar working. The idea is that all elements need to be on the same line: the four to the left, and 3 links to the right.

However, even with using display: inline-block, I can't seem to get the list items to actually stay on the one line. Any ideas? (Currently using red background to highlight them for debugging)

html {
  font-family: sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 3.41;
}

body {
  background-color: #111;
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

h1 {
  margin: 0;
}

.navi li {
  list-style: none;
}

.navi a {
  text-decoration: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 2em 0 2em;
  font-size: 18px;
  font-weight: 500;
  color: white;
}

.navi-left {
  display: inline-block;
  margin-right: 10px;
  width: 200px;
  background-color: red;
}

.navi-right {
  display: inline-block;
  margin-right: 10px;
  width: 200px;
  background-color: red;
}

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- <nav class="header-navi"> -->
<nav class="navi">
  <ul class="navi navi-left">
    <li><a href="work.html">Wip</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="coursework.html">Coursework</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <ul class="navi navi-right">
    <li><a href="https://www.dribbble.com" target="blank">Dribbble</a></li>
    <li><a href="https://www.twitter.com" target="blank">Twitter</a></li>
    <li><a href="https://www.Github.com" target="blank">Github</a></li>
  </ul>
</nav>
</header>

You have many display options you can use on different levels (grid/flex/inline-block,...), try to avoid float ;) Should it wrap instead overflow on smaller screens ? — G-Cyrillus, Sep 15 '21 at 13:05
What exactly do you mean by `same line`? Either horizontally or vertically? — DecPK, Sep 15 '21 at 13:08
@HR01M8055 sorry! I meant horizontally, I want them all to be sitting same level! — Spookr, Sep 15 '21 at 13:09
@CBroe see i'm using that, I added ``` .navi li { list-style: none; display: inline-flex; } ``` But it only affects the first box for some reason — Spookr, Sep 15 '21 at 13:10
Do the answers below and the new title are accurately address what you want? If so, this is a duplicate question of quite a few existing ones. I can dupe it pointing toward one of the more canonical questions. — TylerH, Sep 15 '21 at 13:21
@TylerH It is fairly accurate yes, if it's a dupe apologies and please do! — Spookr, Sep 15 '21 at 13:35
@Spookr No worries; I added the duplicate target to the banner at the top of the question, as well as a question that covers the difference between inline and inline block. — TylerH, Sep 15 '21 at 14:07

score 0 · Accepted Answer · answered Sep 15 '21 at 13:12

You could simply use flex on nav and ul levels to lay them all on a single line.

I removed width: 200px; unless it has a purpose, you should probably clarify showing us the expected result.

If it needs to wrap on smaller device, you can add flex-wrap:wrap to nav or/and ul(unless it needs to be otherwise, clarify)

html {
  font-family: sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 3.41;
}

body {
  background-color: #111;
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

h1 {
  margin: 0;
}

.navi li {
  list-style: none;
}
.navi, .navi ul {display:flex;}
.navi a {
  text-decoration: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 2em 0 2em;
  font-size: 18px;
  font-weight: 500;
  color: white;
}

.navi-left {
  display: inline-block;
  margin-right: auto;
  background-color: red;
}

.navi-right {
  display: inline-block;
  margin-right: 10px;

  background-color: red;
}

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- <nav class="header-navi"> -->
<nav class="navi">
  <ul class="navi navi-left">
    <li><a href="work.html">Wip</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="coursework.html">Coursework</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <ul class="navi navi-right">
    <li><a href="https://www.dribbble.com" target="blank">Dribbble</a></li>
    <li><a href="https://www.twitter.com" target="blank">Twitter</a></li>
    <li><a href="https://www.Github.com" target="blank">Github</a></li>
  </ul>
</nav>
</header>

This right here was the expected result thanks, Oddly enough after editing my code it still had the errors so i cut and repasted it and then it worked. VScode really can be tempermental. Thanks! — Spookr, Sep 15 '21 at 13:29
And by flex wrap do you mind if i pick your brain and ask what you mean? Currently this is my first website building project and i'm learning as I go so still relatively new! I am looking to optimize it for mobile/ small devices down the line so would be good to know about it now. — Spookr, Sep 15 '21 at 13:40
`flex-wrap:wrap` will allow the elements to wrap to next line instead overflowing on the side. It can be a start for a responsive attitude :) , but you can also search for example and tutorials to build a responsive menu . https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries mediaquerie will be something you will need aside being able to reflow your menu in a column and hide partially. About flex , this guide can help https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for a burger css example https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/ — G-Cyrillus, Sep 15 '21 at 13:58

score 0 · Answer 2 · answered Sep 15 '21 at 13:15

You can align both the ul using flexbox

nav,
nav > ul {
  display: flex;
}

and remove the display: inline-block from both ul

html {
  font-family: sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 3.41;
}

body {
  background-color: #111;
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

h1 {
  margin: 0;
}

.navi li {
  list-style: none;
}

.navi a {
  text-decoration: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 2em 0 2em;
  font-size: 18px;
  font-weight: 500;
  color: white;
}

.navi-left {
  margin-right: 10px;
  background-color: red;
}

.navi-right {
  margin-right: 10px;
  background-color: red;
}

nav,
nav > ul {
  display: flex;
}

<nav class="navi">
  <ul class="navi navi-left">
    <li><a href="work.html">Wip</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="coursework.html">Coursework</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <ul class="navi navi-right">
    <li><a href="https://www.dribbble.com" target="blank">Dribbble</a></li>
    <li><a href="https://www.twitter.com" target="blank">Twitter</a></li>
    <li><a href="https://www.Github.com" target="blank">Github</a></li>
  </ul>
</nav>

Why won't my two unordered lists display inline?

2 Answers2