'How to split apart a single list with CSS

I'm trying to use a single unordered list and splitting one of the list elements from the others and putting this one onto the left side and others on the right while keeping it responsive. How can I do this?

I've tried :not(.logo), I've tried using floats, I've tried just selecting .logo, I've tried space-around, I've tried checking online but all of the examples use multiple elements instead of a single list. It seems quite simple so I'm assuming I'm missing something?

Fiddle

<style>
    ul {
        display: inline-flex;
    }

    ul li {
        list-style-type: none;
        padding: 0 20px;
    }

    .logo {
        font-weight: bold;
    }
</style>
<ul>
    <li class="logo">Company Logo</li>
    <li>FAQ</li>
    <li>About Us</li>
    <li>Contact</li>
</ul>
htmlcss


Solution 1:[1]

While you've already accepted an answer – which uses floats to implement layout, which is itself a somewhat antiquated technique – I thought I'd demonstrate a couple of alternate possibilities, both of which retain the use of flex-box layout; the first is:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('li.logo').classList.toggle('bordered');
});
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font-family: system-ui;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

main {
  display: grid;
  gap: 0.5em;
  margin-block: 1em;
  margin-inline: auto;
  width: clamp(30em, 80vw, 900px);
}

ul {
  display: flex;
  justify-content: end;
  border: 1px solid #000;
  padding: 0.5em;
}

ul li {
  list-style-type: none;
  padding: 0 20px;
}

.logo {
  font-weight: bold;
  /* uses the maximum possible space between this element's inline-end margin
     and the next sibling-element's inline-start; effectively pushing them as
     far apart as possible within the constraints of the bounding box: */
  margin-inline-end: auto;
  border: 1px solid transparent;
}

.bordered {
  border-color: #000;
}
<main>
  <button>Toggle border</button>
  <ul>
    <li class="logo">Company Logo</li>
    <li>FAQ</li>
    <li>About Us</li>
    <li>Contact</li>
  </ul>
</main>

JS Fiddle.

Or, instead:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('li.logo').classList.toggle('bordered');
});
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font-family: system-ui;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

main {
  display: grid;
  gap: 0.5em;
  margin-block: 1em;
  margin-inline: auto;
  width: clamp(30em, 80vw, 900px);
}

ul {
  display: flex;
  justify-content: end;
  border: 1px solid #000;
  padding: 0.5em;
}

ul li {
  list-style-type: none;
  padding: 0 20px;
}

.logo {
  font-weight: bold;
  /* causes the element to grow, if it's the only element with flex-grow
     then it will grow to fill up the available space; if multiple
     elements have flex-grow set then it will grow proportional to those
     other elements: */
  flex-grow: 1;
  border: 1px solid transparent;
}

.bordered {
  border-color: #000;
}
<main>
  <button>Toggle border</button>
  <ul>
    <li class="logo">Company Logo</li>
    <li>FAQ</li>
    <li>About Us</li>
    <li>Contact</li>
  </ul>
</main>

JS Fiddle demo.

If you press the <button> in the latter demo, you'll see that while the text of the .logo element appears in the left/start of the element, the element itself occupies all the space between the left/start border and the second element. This might be acceptable, but may also be considered a problem.

For that reason, while the latter approach is possible, the first approach is my recommendation.

References:

Bibliography:

Solution 2:[2]

If you don't mind giving up a flex layout, you can do something like this.

It would be easier to style if the logo were separate from the list, but it is still possible.

ul {
  text-align: end;
}

ul li {
  list-style-type: none;
  display: inline-block;
  padding: 0 20px;
}

ul li.logo {
  float: left;
  clear: both;
}

.logo {
  font-weight: bold;
}
<ul>
  <li class="logo">Company Logo</li>
  <li>FAQ</li>
  <li>About Us</li>
  <li>Contact</li>
</ul>

Solution 3:[3]

Try the following:

nav ul {
    display: inline;
}

nav ul li {
    list-style-type: none;
    padding: 0 20px;
    float: right;
}

.logo {
    font-weight: bold;
    float: left;
}

But when you do this , items in the float right will be ordered right to left.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 David Thomas
Solution 2 Jack
Solution 3 Vidiya Prasanth Pappannan

Related Questions