CODEWITHSUNDEEP
htmlcss
Nagarjuna Reddy
Nagarjuna Reddy

Reputation: 4195

How to align every two <li> next to each other

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/

Upvotes: 1

Views: 478

Answers (8)

Jino Shaji
Jino Shaji

Reputation: 1105

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>

Upvotes: 0

Osama
Osama

Reputation: 3040

Use pseudo class even 

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

Upvotes: 0

Krishna9960
Krishna9960

Reputation: 529

$('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/

Upvotes: 0

Manoj Kadolkar
Manoj Kadolkar

Reputation: 716

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; 
}

Upvotes: 1

Ashish Thakur
Ashish Thakur

Reputation: 323

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>

Upvotes: 1

schadenfreude
schadenfreude

Reputation: 222

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

Upvotes: 1

Qasim
Qasim

Reputation: 168

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.

Upvotes: 3

Niklesh Raut
Niklesh Raut

Reputation: 34914

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>

Upvotes: 1

Related Questions