How to style two groups of <li> in a single line?

Question

I want to have two groups of list items in one line, so that one group starts from left to right and another from right to left; like so:

[li1 li2 li3]........................................[li6 li5 li4]

I have tried this:

li{
  display:inline;
 }
#left{
  float:left;
 }
#right{
  float:right;
  direction:rtl;
 }

<ul>
  <span id="left">
    <li> item1</li>
    <li> item2</li>
    <li> item3</li>
    </span>
  <span id="right">
    <li> item4</li>
    <li> item5</li>
    <li> item6</li>
    </span>
</ul>

The output works, but the code is not valid, since it uses a <span> directly under a <ul>.

What's the valid code for this?

Haubergeon

Out of curiosity: Is there any particular reason to structure it as one complex ul instead of two simpler uls packed in div? That would open some more possibilities. – Throughway

Answer 1

You are correct about <span> directly under a <ul> being invalid. Here's a few solutions:

Give float to the <li> element directly.

li{
  display:inline;
  float: left;
 }
.right{
  float:right;
  direction:rtl;
 }

<ul>
    <li> item1</li>
    <li> item2</li>
    <li> item3</li>
    <li class="right"> item4</li>
    <li class="right"> item5</li>
    <li class="right"> item6</li>
</ul>

---

Use nth-of-type or nth-child.

I think this is a nice and clean solution. Though you'd have to change the css if you add/remove items in the list:

li {
  display: inline;
  float: left;
}
li:nth-of-type(n+4) {
  float: right;
}

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

Also, it looks like you can omit the direction: rtl from your code.

Deserving

@EricMüller OP wanted this behavior it seems. Check the question. – Deserving

You're right, I assumed he wanted 1,2,3,4,5,6. It seemed more plausible to me – Disincline

Answer 2

Try something like this;

<ul>
    <li class="left"> item1</li>
    <li class="left"> item2</li>
    <li class="left"> item3</li>
    <li class="right"> item4</li>
    <li class="right"> item5</li>
    <li class="right"> item6</li>
</ul>



ul li {
  margin-left:10px;
  margin-right:20px;
}
.left {
  float:left;
}
.right {
  float:right;
  direct:rtl;
}

You are just giving all items with a left class the float left rule, and all items with the right class a float right rule (and then changing the direction like you were originally). This way you don't have to add any extra markup or wrap the li's in a li or anything.

Redding

Answer 3

You may find display:inline-block helpful in your coding practise. You can then use positioning to position these:

ul{
  display: inline-block;
  list-style: none;
  background-color: tomato;
  position: absolute;
}
ul:nth-child(1) {
  left: 0;
}
ul:nth-child(2) {
  background-color: cornflowerblue;
  right: 0;
  direction:rtl;
}

ul li{
  display:inline-block;
  }

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

<ul>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

Wilkey

Answer 4

You can use ul > li > ul > li structure

ul {
  padding: 0;
}
li {
  display: inline;
}
#left {
  float: left;
}
#right li {
  float: right; 
  direction: rtl;
}

<ul>
  <li id="left">
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
  </li>
  <li id="right">
    <ul>
    <li> item4</li>
    <li> item5</li>
    <li> item6</li>
    </ul>
  </li>
</ul>

You can also use Flexbox and change order of elements

ul {
  padding: 0;
  display: flex;
  list-style-type: none;
}

li:nth-child(3) {flex: 1;}
li:nth-child(4) {order: 6;}
li:nth-child(5) {order: 5;}
li:nth-child(6) {order: 4;}

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

Dyad

I believe OP wanted direction to be right-to-left. So the output should be item 6 -> item 5 -> item 4. – Deserving

Running your snippet gives me item 4 -> item 5 -> item 6 – Deserving

Answer 5

<ul>
    <li class="left"> item1</li>
    <li class="left"> item2</li>
    <li class="left"> item3</li>
    <li class="right"> item4</li>
    <li class="right"> item5</li>
    <li class="right"> item6</li>
</ul>



ul li {
  margin-left:10px;
  margin-right:20px;
}
.left {
  float:left;
}
.right {
  float:right;
}

Schwejda

Answer 6

<ul class="leftgrp">
    <li class="left"> item1</li>
    <li class="left"> item2</li>
    <li class="left"> item3</li>
</ul>
<ul class="rightgrp">
    <li class="right"> item4</li>
    <li class="right"> item5</li>
    <li class="right"> item6</li>

</ul>

.leftgrp {
  float:left;
}
.rightgrp {
  float:right;
  direct:rtl;
}

in case of responsive you can use bootstrap

Apparitor