4
以下私が作成したアルファベット順の索引のコードがあります。私はちょうど私も数字のオプションを持っているべきだと決めたので、別の李 "＃"を追加しようとしましたが、インデックスラインに留まらず、一番下に落ちます。誰かが私が逃しているものを見ることができますか何でも助けてくれる、歓声。 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.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>
フム...私のintutionは、これは 'のいずれかの欠如によって引き起こされたということでした青い棒が100％の幅を持つが、どちらの方法もうまくいきませんでした。 – Dragomok