html5 js字母索引,HTML – 在字母索引中添加li

这只是因为线路上没有足够的空间,因为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,#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;

}

• A
• B
• C
• D
• E
• F
• G
• H
• I
• J
• K
• L
• M
• N
• O
• P
• Q
• R
• S
• T
• U
• V
• W
• X
• Y
• Z
• #

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#