How to split apart a single list with CSS-CodePudding

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 >Company Logo</li>
    <li>FAQ</li>
    <li>About Us</li>
    <li>Contact</li>
</ul>

CodePudding user response：

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 >Company Logo</li>
  <li>FAQ</li>
  <li>About Us</li>
  <li>Contact</li>
</ul>

CodePudding user response：

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.