html让ul的li自动居中,HTML如何让ul标签中的li与其他的标签开头对齐

上面这个是我自己完成出来的效果

这个是所需要完成的效果。具体就是前面的1 2 3 4 与左边的框对齐是怎么做到的？跪求各位大佬

#a{

width: 350px;

background-color: white;

}

.b{

padding: 10px;

background-color: red;

color: white;

font-weight: bold;

}

#a li div{

display: none;

text-align: center;

}

#a a:hover div{

display: block;

}

span{

color: #FFF;

background:url(img/dot_01.gif)0px 7px no-repeat;

text-align: center;

padding: 10px;

font-weight: bold;

}

a:hover span{

background: url(img/dot_02.gif)0px 7px no-repeat;

}

li{

list-style-type: none;

}

a:link{

text-decoration: none;

}

a{

color: rosybrown;

}

a:hover{

color: orangered;

}