How to align every two
next to each other

Question

I am trying to align every two li elements side by side (Like : 0-9, A-B, C-D, ...). Currently, it is aligned one-by-one.

<ul>
    <li class="alphabetRow"><a href="#" id="alpha_1" class="alphabet active" >0-9</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_2" class="alphabet" >A</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_3" class="alphabet" >B</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_4" class="alphabet" >C</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_5" class="alphabet" >D</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_6" class="alphabet" >E</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_7" class="alphabet" >F</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_8" class="alphabet" >G</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_9" class="alphabet" >H</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_10" class="alphabet" >I</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_11" class="alphabet" >J</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_12" class="alphabet" >K</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_13" class="alphabet" >L</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_14" class="alphabet" >M</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_15" class="alphabet" >N</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_16" class="alphabet" >O</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_17" class="alphabet" >P</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_18" class="alphabet" >Q</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_19" class="alphabet" >R</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_20" class="alphabet" >S</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_21" class="alphabet" >T</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_22" class="alphabet" >U</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_23" class="alphabet" >V</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_24" class="alphabet" >W</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_25" class="alphabet" >X</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_26" class="alphabet" >Y</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_27" class="alphabet" >Z</a></li>
  </ul>

Fiddle: https://jsfiddle.net/g8jzgzev/1/

You want to the outut to be like this 0-9, A-B, C-D after every two li you want new line ?? — Krishna9960, Sep 14 '17 at 07:36
Possible duplicate of [How to display an unordered list in two columns?](https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns) — Douwe de Haan, Sep 14 '17 at 07:43

score 3 · Answer 1 · answered Sep 14 '17 at 07:39

3

You mean like this. https://jsfiddle.net/g8jzgzev/4/

ul {
  list-style-type: none;
  overflow: hidden;
}
li {
  float: left;
}
li:nth-child(2n) {
  clear: left;
}

Float them and clear every third one.

answered Sep 14 '17 at 07:39

Qasim

168
1
8

thanks for reply. Is it possible to put hyphen(-) between AB ad CD.. (like A-B, C-D..)? – Nagarjuna Reddy Sep 14 '17 at 07:41

score 1 · Answer 2 · answered Sep 14 '17 at 07:38

do you want like this

/*.col-sm-6{
  width:50%;
  float:left;
}
*/
ul li{
  width:50%;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="alphabetRow"><a href="#" id="alpha_1" class="alphabet active" >0-9</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_2" class="alphabet" >A</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_3" class="alphabet" >B</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_4" class="alphabet" >C</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_5" class="alphabet" >D</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_6" class="alphabet" >E</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_7" class="alphabet" >F</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_8" class="alphabet" >G</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_9" class="alphabet" >H</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_10" class="alphabet" >I</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_11" class="alphabet" >J</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_12" class="alphabet" >K</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_13" class="alphabet" >L</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_14" class="alphabet" >M</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_15" class="alphabet" >N</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_16" class="alphabet" >O</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_17" class="alphabet" >P</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_18" class="alphabet" >Q</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_19" class="alphabet" >R</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_20" class="alphabet" >S</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_21" class="alphabet" >T</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_22" class="alphabet" >U</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_23" class="alphabet" >V</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_24" class="alphabet" >W</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_25" class="alphabet" >X</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_26" class="alphabet" >Y</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_27" class="alphabet" >Z</a></li>
  </ul>

score 1 · Answer 3 · answered Sep 14 '17 at 07:39

1

If you want to align every two li elements side by side, I guess that you're looking for a multi column list.

answered Sep 14 '17 at 07:39

schadenfreude

212
4
15

score 1 · Answer 4 · answered Sep 14 '17 at 07:42

Use following CSS for li tag

ul li{
  width:50%;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="alphabetRow"><a href="#" id="alpha_1" class="alphabet active" >0-9</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_2" class="alphabet" >A</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_3" class="alphabet" >B</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_4" class="alphabet" >C</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_5" class="alphabet" >D</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_6" class="alphabet" >E</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_7" class="alphabet" >F</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_8" class="alphabet" >G</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_9" class="alphabet" >H</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_10" class="alphabet" >I</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_11" class="alphabet" >J</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_12" class="alphabet" >K</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_13" class="alphabet" >L</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_14" class="alphabet" >M</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_15" class="alphabet" >N</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_16" class="alphabet" >O</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_17" class="alphabet" >P</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_18" class="alphabet" >Q</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_19" class="alphabet" >R</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_20" class="alphabet" >S</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_21" class="alphabet" >T</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_22" class="alphabet" >U</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_23" class="alphabet" >V</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_24" class="alphabet" >W</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_25" class="alphabet" >X</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_26" class="alphabet" >Y</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_27" class="alphabet" >Z</a></li>
  </ul>

score 1 · Answer 5 · answered Sep 14 '17 at 07:44

1

Here's the updated fiddle, Add the CSS

ul {
  list-style-type: none;

}
ul li{
   display: inline;
   float:left;
}

li:nth-child(2n) {   
  clear: left; 
}

answered Sep 14 '17 at 07:44

Manoj Kadolkar

717
8
22

Thanks for reply. Is it possible to put hyphen(-) between AB ad CD.. (like A-B, C-D..)? – Nagarjuna Reddy Sep 14 '17 at 07:45
Good CSS Way :) – Krishna9960 Sep 14 '17 at 07:46
I have posted a Jquery way Solution...But i would suggest go @Manoj's Way..Performance will be good. – Krishna9960 Sep 14 '17 at 07:50
1

Here's updated fiddle https://jsfiddle.net/Manoj1991/g8jzgzev/17/ @NNR – Manoj Kadolkar Sep 14 '17 at 07:55

score 0 · Answer 6 · answered Sep 14 '17 at 07:48

0

$('li').each(function(index) {
    if(index%2 == 0)
       $(this).after("<br>");   
});

//CSS

ul {
  list-style-type: none;

}
li{
 display: inline-block;
 float: left;
}

Jquery Way working fiddle https://jsfiddle.net/g8jzgzev/14/

answered Sep 14 '17 at 07:48

Krishna9960

529
2
12

score 0 · Answer 7 · answered Sep 14 '17 at 07:52

0

Use pseudo class even

li:nth-child(even) {
float:left;
}

answered Sep 14 '17 at 07:52

Osama

2,912
1
12
15

Jino Shaji · Answer 8 · 2017-09-14T08:07:22.487

Just go through this. You can use CSS3 :nth-child() Selector to achieve this thing.

Specify a content as '-' for every <li> element after the current content whose index is a multiple of 2: for that the code is li:nth-child(2n):after

ul {
  list-style-type: none;
  overflow: hidden;
}
li {
  float: left;
}
li:nth-child(2n) {
  clear: left;
  content:
}
li:nth-child(2n):after {
  content: "–";
  }

<ul>
    <li class="alphabetRow"><a href="#" id="alpha_1" class="alphabet active" >0-9</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_2" class="alphabet" >A</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_3" class="alphabet" >B</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_4" class="alphabet" >C</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_5" class="alphabet" >D</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_6" class="alphabet" >E</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_7" class="alphabet" >F</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_8" class="alphabet" >G</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_9" class="alphabet" >H</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_10" class="alphabet" >I</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_11" class="alphabet" >J</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_12" class="alphabet" >K</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_13" class="alphabet" >L</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_14" class="alphabet" >M</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_15" class="alphabet" >N</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_16" class="alphabet" >O</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_17" class="alphabet" >P</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_18" class="alphabet" >Q</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_19" class="alphabet" >R</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_20" class="alphabet" >S</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_21" class="alphabet" >T</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_22" class="alphabet" >U</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_23" class="alphabet" >V</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_24" class="alphabet" >W</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_25" class="alphabet" >X</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_26" class="alphabet" >Y</a></li>
    <li class="alphabetRow"><a href="#" id="alpha_27" class="alphabet" >Z</a></li>
  </ul>

Is this is your expected output? – Jino Shaji Sep 14 '17 at 08:02 — Jino Shaji, Sep 14 '17 at 08:02

How to align every two next to each other

8 Answers8

How to align every two
next to each other