Reputation:

Adding li In Alphabet Index

Below I have code for an alphabetical Index I have created. I just decided I should have an option for numbers as well so I tried adding another li "#" but it falls to the bottom instead of staying in the index line. Can anyone see what I am missing? Anything helps, cheers.

.alphabet {
list-style-type: none;
    margin:0px auto 0;
    padding:0;
    cursor: pointer;
    width:100%;
    text-align:center;
}

.alphabet li {
float:left;
    margin:0;
    padding:0;
    border-right:1px solid darkgrey;
    font-size: 13px;
    font-family:Verdana;
    -moz-box-sizing:border-box;
    color:black;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:3.84%;
}

.alphabet li:last-child {
  border-right: none;
}

.alphabet li:hover {
  color: #005bab;
  background-color: #e2ecf6;
}

.bottombar1{
       content: "";
       display:block;
       height:0.7em;
       width:100%;
       background-color:#00688B;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ,#panelnumber {
  display: none;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ, #panelnumber {
    display: none;
    font-size: 16px;
    text-align: center;
    background-color:#e2ecf6;
    border-style:solid;
    border-width:1px;
    padding-top:5px;
    padding-bottom:5px;
    border-color:transparent;
    color: #005bab;
    margin: auto;
}

<div>
  <ul class="alphabet">
    <li class="flip">A</li>
    <li class="flip">B</li>
    <li class="flip">C</li>
    <li class="flip">D</li>
    <li class="flip">E</li>
    <li class="flip">F</li>
    <li class="flip">G</li>
    <li class="flip">H</li>
    <li class="flip">I</li>
    <li class="flip">J</li>
    <li class="flip">K</li>
    <li class="flip">L</li>
    <li class="flip">M</li>
    <li class="flip">N</li>
    <li class="flip">O</li>
    <li class="flip">P</li>
    <li class="flip">Q</li>
    <li class="flip">R</li>
    <li class="flip">S</li>
    <li class="flip">T</li>
    <li class="flip">U</li>
    <li class="flip">V</li>
    <li class="flip">W</li>
    <li class="flip">X</li>
    <li class="flip">Y</li>
    <li class="flip">Z</li>
    <li class="flip">#</li>
  </ul>
</div>
<br style="line-height:25px;"/>
<div id="panelA" class="js-div">
  <p>A</p>
</div>
<div id="panelB" class="js-div">
  <p>B</p>
</div>
<div id="panelC" class="js-div">
  <p>C</p>
</div>
<div id="panelD" class="js-div">
  <p>D</p>
</div>
<div id="panelE" class="js-div">
  <p>E</p>
</div>
<div id="panelF" class="js-div">
  <p>F</p>
</div>
<div id="panelG" class="js-div">
  <p>G</p>
</div>
<div id="panelH" class="js-div">
  <p>H</p>
</div>
<div id="panelI" class="js-div">
  <p>I</p>
</div>
<div id="panelJ" class="js-div">
  <p>J</p>
</div>
<div id="panelK" class="js-div">
  <p>K</p>
</div>
<div id="panelL" class="js-div">
  <p>L</p>
</div>
<div id="panelM" class="js-div">
  <p>M</p>
</div>
<div id="panelN" class="js-div">
  <p>N</p>
</div>
<div id="panelO" class="js-div">
  <p>O</p>
</div>
<div id="panelP" class="js-div">
  <p>P</p>
</div>
<div id="panelQ" class="js-div">
  <p>Q</p>
</div>
<div id="panelR" class="js-div">
  <p>R</p>
</div>
<div id="panelS" class="js-div">
  <p>S</p>
</div>
<div id="panelT" class="js-div">
  <p>T</p>
</div>
<div id="panelU" class="js-div">
  <p>U</p>
</div>
<div id="panelV" class="js-div">
  <p>V</p>
</div>
<div id="panelW" class="js-div">
  <p>W</p>
</div>
<div id="panelX" class="js-div">
  <p>X</p>
</div>
<div id="panelY" class="js-div">
  <p>Y</p>
</div>
<div id="panelZ" class="js-div">
  <p>Z</p>
</div>
<div id="panelnumber" class="js-div">
  <p>#</p>
</div>
<div class="bottombar1"></div>

Upvotes: 4

Answers (3)

komal

Reputation: 135

Just changed the width to width:3.7%; in class .alphabet li to get desired result. Further if you want to add more items , just change width of li to fit all items in one line

.alphabet {
list-style-type: none;
    margin:0px auto 0;
    padding:0;
    cursor: pointer;
    width:100%;
    text-align:center;
}

.alphabet li {
float:left;
    margin:0;
    padding:0;
    border-right:1px solid darkgrey;
    font-size: 13px;
    font-family:Verdana;
    -moz-box-sizing:border-box;
    color:black;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:3.7%; /*line changed*/
}

.alphabet li:last-child {
  border-right: none;
}

.alphabet li:hover {
  color: #005bab;
  background-color: #e2ecf6;
}

.bottombar1{
       content: "";
       display:block;
       height:0.7em;
       width:100%;
       background-color:#00688B;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ,#panelnumber {
  display: none;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ, #panelnumber {
    display: none;
    font-size: 16px;
    text-align: center;
    background-color:#e2ecf6;
    border-style:solid;
    border-width:1px;
    padding-top:5px;
    padding-bottom:5px;
    border-color:transparent;
    color: #005bab;
    margin: auto;
}

<div>
  <ul class="alphabet">
    <li class="flip">A</li>
    <li class="flip">B</li>
    <li class="flip">C</li>
    <li class="flip">D</li>
    <li class="flip">E</li>
    <li class="flip">F</li>
    <li class="flip">G</li>
    <li class="flip">H</li>
    <li class="flip">I</li>
    <li class="flip">J</li>
    <li class="flip">K</li>
    <li class="flip">L</li>
    <li class="flip">M</li>
    <li class="flip">N</li>
    <li class="flip">O</li>
    <li class="flip">P</li>
    <li class="flip">Q</li>
    <li class="flip">R</li>
    <li class="flip">S</li>
    <li class="flip">T</li>
    <li class="flip">U</li>
    <li class="flip">V</li>
    <li class="flip">W</li>
    <li class="flip">X</li>
    <li class="flip">Y</li>
    <li class="flip">Z</li>
    <li class="flip">#</li>
  </ul>
</div>
<br style="line-height:25px;"/>
<div id="panelA" class="js-div">
  <p>A</p>
</div>
<div id="panelB" class="js-div">
  <p>B</p>
</div>
<div id="panelC" class="js-div">
  <p>C</p>
</div>
<div id="panelD" class="js-div">
  <p>D</p>
</div>
<div id="panelE" class="js-div">
  <p>E</p>
</div>
<div id="panelF" class="js-div">
  <p>F</p>
</div>
<div id="panelG" class="js-div">
  <p>G</p>
</div>
<div id="panelH" class="js-div">
  <p>H</p>
</div>
<div id="panelI" class="js-div">
  <p>I</p>
</div>
<div id="panelJ" class="js-div">
  <p>J</p>
</div>
<div id="panelK" class="js-div">
  <p>K</p>
</div>
<div id="panelL" class="js-div">
  <p>L</p>
</div>
<div id="panelM" class="js-div">
  <p>M</p>
</div>
<div id="panelN" class="js-div">
  <p>N</p>
</div>
<div id="panelO" class="js-div">
  <p>O</p>
</div>
<div id="panelP" class="js-div">
  <p>P</p>
</div>
<div id="panelQ" class="js-div">
  <p>Q</p>
</div>
<div id="panelR" class="js-div">
  <p>R</p>
</div>
<div id="panelS" class="js-div">
  <p>S</p>
</div>
<div id="panelT" class="js-div">
  <p>T</p>
</div>
<div id="panelU" class="js-div">
  <p>U</p>
</div>
<div id="panelV" class="js-div">
  <p>V</p>
</div>
<div id="panelW" class="js-div">
  <p>W</p>
</div>
<div id="panelX" class="js-div">
  <p>X</p>
</div>
<div id="panelY" class="js-div">
  <p>Y</p>
</div>
<div id="panelZ" class="js-div">
  <p>Z</p>
</div>
<div id="panelnumber" class="js-div">
  <p>#</p>
</div>
<div class="bottombar1"></div>

Upvotes: 0

freginold

Reputation: 3956

It's only because there isn't enough room on the line, since the lis are divided up by percentage. If you change the width from 3.84% to 3.6% they will all show on the same line. You can play around with the percentages to make it line up exactly.

(Note that it's not because of the #: If you swap any two of the list items, the last one will still be on the next line.)

See this example with width: 3.6%:

.alphabet {
list-style-type: none;
    margin:0px auto 0;
    padding:0;
    cursor: pointer;
    width:100%;
    text-align:center;
}

.alphabet li {
float:left;
    margin:0;
    padding:0;
    border-right:1px solid darkgrey;
    font-size: 13px;
    font-family:Verdana;
    -moz-box-sizing:border-box;
    color:black;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:3.6%;
}

.alphabet li:last-child {
  border-right: none;
}

.alphabet li:hover {
  color: #005bab;
  background-color: #e2ecf6;
}

.bottombar1{
       content: "";
       display:block;
       height:0.7em;
       width:100%;
       background-color:#00688B;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ,#panelnumber {
  display: none;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ, #panelnumber {
    display: none;
    font-size: 16px;
    text-align: center;
    background-color:#e2ecf6;
    border-style:solid;
    border-width:1px;
    padding-top:5px;
    padding-bottom:5px;
    border-color:transparent;
    color: #005bab;
    margin: auto;
}

<div>
  <ul class="alphabet">
    <li class="flip">A</li>
    <li class="flip">B</li>
    <li class="flip">C</li>
    <li class="flip">D</li>
    <li class="flip">E</li>
    <li class="flip">F</li>
    <li class="flip">G</li>
    <li class="flip">H</li>
    <li class="flip">I</li>
    <li class="flip">J</li>
    <li class="flip">K</li>
    <li class="flip">L</li>
    <li class="flip">M</li>
    <li class="flip">N</li>
    <li class="flip">O</li>
    <li class="flip">P</li>
    <li class="flip">Q</li>
    <li class="flip">R</li>
    <li class="flip">S</li>
    <li class="flip">T</li>
    <li class="flip">U</li>
    <li class="flip">V</li>
    <li class="flip">W</li>
    <li class="flip">X</li>
    <li class="flip">Y</li>
    <li class="flip">Z</li>
    <li class="flip">#</li>
  </ul>
</div>
<br style="line-height:25px;"/>
<div id="panelA" class="js-div">
  <p>A</p>
</div>
<div id="panelB" class="js-div">
  <p>B</p>
</div>
<div id="panelC" class="js-div">
  <p>C</p>
</div>
<div id="panelD" class="js-div">
  <p>D</p>
</div>
<div id="panelE" class="js-div">
  <p>E</p>
</div>
<div id="panelF" class="js-div">
  <p>F</p>
</div>
<div id="panelG" class="js-div">
  <p>G</p>
</div>
<div id="panelH" class="js-div">
  <p>H</p>
</div>
<div id="panelI" class="js-div">
  <p>I</p>
</div>
<div id="panelJ" class="js-div">
  <p>J</p>
</div>
<div id="panelK" class="js-div">
  <p>K</p>
</div>
<div id="panelL" class="js-div">
  <p>L</p>
</div>
<div id="panelM" class="js-div">
  <p>M</p>
</div>
<div id="panelN" class="js-div">
  <p>N</p>
</div>
<div id="panelO" class="js-div">
  <p>O</p>
</div>
<div id="panelP" class="js-div">
  <p>P</p>
</div>
<div id="panelQ" class="js-div">
  <p>Q</p>
</div>
<div id="panelR" class="js-div">
  <p>R</p>
</div>
<div id="panelS" class="js-div">
  <p>S</p>
</div>
<div id="panelT" class="js-div">
  <p>T</p>
</div>
<div id="panelU" class="js-div">
  <p>U</p>
</div>
<div id="panelV" class="js-div">
  <p>V</p>
</div>
<div id="panelW" class="js-div">
  <p>W</p>
</div>
<div id="panelX" class="js-div">
  <p>X</p>
</div>
<div id="panelY" class="js-div">
  <p>Y</p>
</div>
<div id="panelZ" class="js-div">
  <p>Z</p>
</div>
<div id="panelnumber" class="js-div">
  <p>#</p>
</div>
<div class="bottombar1"></div>

Upvotes: 3

Chris Happy

Reputation: 7295

Use width: 3.7%; on the li css.

.alphabet {
list-style-type: none;
    margin:0px auto 0;
    padding:0;
    cursor: pointer;
    width:100%;
    text-align:center;
}

.alphabet li {
float:left;
    margin:0;
    padding:0;
    border-right:1px solid darkgrey;
    font-size: 13px;
    font-family:Verdana;
    -moz-box-sizing:border-box;
    color:black;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:3.7%;
}

.alphabet li:last-child {
  border-right: none;
}

.alphabet li:hover {
  color: #005bab;
  background-color: #e2ecf6;
}

.bottombar1{
       content: "";
       display:block;
       height:0.7em;
       width:100%;
       background-color:#00688B;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ,#panelnumber {
  display: none;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ, #panelnumber {
    display: none;
    font-size: 16px;
    text-align: center;
    background-color:#e2ecf6;
    border-style:solid;
    border-width:1px;
    padding-top:5px;
    padding-bottom:5px;
    border-color:transparent;
    color: #005bab;
    margin: auto;
}

<div>
  <ul class="alphabet">
    <li class="flip">A</li>
    <li class="flip">B</li>
    <li class="flip">C</li>
    <li class="flip">D</li>
    <li class="flip">E</li>
    <li class="flip">F</li>
    <li class="flip">G</li>
    <li class="flip">H</li>
    <li class="flip">I</li>
    <li class="flip">J</li>
    <li class="flip">K</li>
    <li class="flip">L</li>
    <li class="flip">M</li>
    <li class="flip">N</li>
    <li class="flip">O</li>
    <li class="flip">P</li>
    <li class="flip">Q</li>
    <li class="flip">R</li>
    <li class="flip">S</li>
    <li class="flip">T</li>
    <li class="flip">U</li>
    <li class="flip">V</li>
    <li class="flip">W</li>
    <li class="flip">X</li>
    <li class="flip">Y</li>
    <li class="flip">Z</li>
    <li class="flip">#</li>
  </ul>
</div>
<br style="line-height:25px;"/>
<div id="panelA" class="js-div">
  <p>A</p>
</div>
<div id="panelB" class="js-div">
  <p>B</p>
</div>
<div id="panelC" class="js-div">
  <p>C</p>
</div>
<div id="panelD" class="js-div">
  <p>D</p>
</div>
<div id="panelE" class="js-div">
  <p>E</p>
</div>
<div id="panelF" class="js-div">
  <p>F</p>
</div>
<div id="panelG" class="js-div">
  <p>G</p>
</div>
<div id="panelH" class="js-div">
  <p>H</p>
</div>
<div id="panelI" class="js-div">
  <p>I</p>
</div>
<div id="panelJ" class="js-div">
  <p>J</p>
</div>
<div id="panelK" class="js-div">
  <p>K</p>
</div>
<div id="panelL" class="js-div">
  <p>L</p>
</div>
<div id="panelM" class="js-div">
  <p>M</p>
</div>
<div id="panelN" class="js-div">
  <p>N</p>
</div>
<div id="panelO" class="js-div">
  <p>O</p>
</div>
<div id="panelP" class="js-div">
  <p>P</p>
</div>
<div id="panelQ" class="js-div">
  <p>Q</p>
</div>
<div id="panelR" class="js-div">
  <p>R</p>
</div>
<div id="panelS" class="js-div">
  <p>S</p>
</div>
<div id="panelT" class="js-div">
  <p>T</p>
</div>
<div id="panelU" class="js-div">
  <p>U</p>
</div>
<div id="panelV" class="js-div">
  <p>V</p>
</div>
<div id="panelW" class="js-div">
  <p>W</p>
</div>
<div id="panelX" class="js-div">
  <p>X</p>
</div>
<div id="panelY" class="js-div">
  <p>Y</p>
</div>
<div id="panelZ" class="js-div">
  <p>Z</p>
</div>
<div id="panelnumber" class="js-div">
  <p>#</p>
</div>
<div class="bottombar1"></div>

Upvotes: 3

Adding li In Alphabet Index

Answers (3)

Related Questions