HTML – 在字母索引中添加li

概述下面我有我创建的按字母顺序排列的索引的代码.我刚刚决定我应该有一个数字选项,所以我尝试添加另一个li“#”,但它落到了底部,而不是留在索引行.谁能看到我失踪的东西？任何帮助,欢呼. .alphabet {list-style-type: none; margin:0px auto 0; padding:0; cursor: pointer; width:100%; 下面我有我创建的按字母顺序排列的索引的代码.我刚刚决定我应该有一个数字选项,所以我尝试添加另一个li“#”,但它落到了底部,而不是留在索引行.谁能看到我失踪的东西？任何帮助,欢呼.

.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,#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:@R_419_3318@;    color: #005bab;    margin: auto;}

<div>  <ul >    <li >A</li>    <li >B</li>    <li >C</li>    <li >D</li>    <li >E</li>    <li >F</li>    <li >G</li>    <li >H</li>    <li >I</li>    <li >J</li>    <li >K</li>    <li >L</li>    <li >M</li>    <li >N</li>    <li >O</li>    <li >P</li>    <li >Q</li>    <li >R</li>    <li >S</li>    <li >T</li>    <li >U</li>    <li >V</li>    <li >W</li>    <li >X</li>    <li >Y</li>    <li >Z</li>    <li >#</li>  </ul></div><br /><div ID="panelA" >  <p>A</p></div><div ID="panelB" >  <p>B</p></div><div ID="panelC" >  <p>C</p></div><div ID="panelD" >  <p>D</p></div><div ID="panelE" >  <p>E</p></div><div ID="panelF" >  <p>F</p></div><div ID="panelG" >  <p>G</p></div><div ID="panelH" >  <p>H</p></div><div ID="paneli" >  <p>I</p></div><div ID="panelJ" >  <p>J</p></div><div ID="panelK" >  <p>K</p></div><div ID="panelL" >  <p>L</p></div><div ID="panelM" >  <p>M</p></div><div ID="panelN" >  <p>N</p></div><div ID="panelO" >  <p>O</p></div><div ID="panelP" >  <p>P</p></div><div ID="panelQ" >  <p>Q</p></div><div ID="panelR" >  <p>R</p></div><div ID="panelS" >  <p>S</p></div><div ID="panelT" >  <p>T</p></div><div ID="panelU" >  <p>U</p></div><div ID="panelV" >  <p>V</p></div><div ID="panelW" >  <p>W</p></div><div ID="panelX" >  <p>X</p></div><div ID="panelY" >  <p>Y</p></div><div ID="panelZ" >  <p>Z</p></div><div ID="panelnumber" >  <p>#</p></div><div ></div>

解决方法 这只是因为线路上没有足够的空间,因为lis按百分比划分.如果将宽度从3.84％更改为3.6％,则它们将显示在同一行上.您可以使用百分比来使其完全对齐.

(请注意,这不是因为#：如果您交换任何两个列表项,最后一个仍将在下一行.)

请参阅此示例,宽度为：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,#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:@R_419_3318@;    color: #005bab;    margin: auto;}

<div>  <ul >    <li >A</li>    <li >B</li>    <li >C</li>    <li >D</li>    <li >E</li>    <li >F</li>    <li >G</li>    <li >H</li>    <li >I</li>    <li >J</li>    <li >K</li>    <li >L</li>    <li >M</li>    <li >N</li>    <li >O</li>    <li >P</li>    <li >Q</li>    <li >R</li>    <li >S</li>    <li >T</li>    <li >U</li>    <li >V</li>    <li >W</li>    <li >X</li>    <li >Y</li>    <li >Z</li>    <li >#</li>  </ul></div><br /><div ID="panelA" >  <p>A</p></div><div ID="panelB" >  <p>B</p></div><div ID="panelC" >  <p>C</p></div><div ID="panelD" >  <p>D</p></div><div ID="panelE" >  <p>E</p></div><div ID="panelF" >  <p>F</p></div><div ID="panelG" >  <p>G</p></div><div ID="panelH" >  <p>H</p></div><div ID="paneli" >  <p>I</p></div><div ID="panelJ" >  <p>J</p></div><div ID="panelK" >  <p>K</p></div><div ID="panelL" >  <p>L</p></div><div ID="panelM" >  <p>M</p></div><div ID="panelN" >  <p>N</p></div><div ID="panelO" >  <p>O</p></div><div ID="panelP" >  <p>P</p></div><div ID="panelQ" >  <p>Q</p></div><div ID="panelR" >  <p>R</p></div><div ID="panelS" >  <p>S</p></div><div ID="panelT" >  <p>T</p></div><div ID="panelU" >  <p>U</p></div><div ID="panelV" >  <p>V</p></div><div ID="panelW" >  <p>W</p></div><div ID="panelX" >  <p>X</p></div><div ID="panelY" >  <p>Y</p></div><div ID="panelZ" >  <p>Z</p></div><div ID="panelnumber" >  <p>#</p></div><div ></div>

总结

以上是内存溢出为你收集整理的HTML – 在字母索引中添加li全部内容，希望文章能够帮你解决HTML – 在字母索引中添加li所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。