清除li内a标签的float=left实现a标签在li内居中显示(ul内li不居中显示)

写在前面:

修改cnblogs主页面菜单显示问题. 问题描述:在给主菜单添加hover样式后发现菜单内容并未居中.见图1.

网上搜索到资料其中一篇讲的可以说简明扼要了,也是伸手党的福利(点我查看原文).懒得点的话代码也附到文章最后了= =.

但是! 凡事都有个但是! 关键是我伸手后并没达到预期效果, 仍然是不居中, 寻思是不是博主搞错了?

F12调试才发现li下面的a标签仍然有一个float:left属性, 去掉之后能实现居中显示! 喜大普奔有木有!不说了, 见图2.

 

附转载文章代码:

html:

<div id="nav_sub_page">
    <a id="sub_prev" href="#">&lt;&lt;上一页</a>
    <ul>
        <li>
            <a href="#/1" class="active">1</a>
        </li>
        <li>
            <a href="#/2">2</a>
        </li>
    </ul><a id="sub_next" href="#">下一页&gt;&gt;</a>
</div>

 css:

<style type="text/css">
    
    #nav_sub_page {
        text-align: center;
        width: 80%;
    }

    #nav_sub_page ul {
        display: inline-block;
        margin: 10px 20px;
        padding: 0px;
    }

    #nav_sub_page ul li {
        display: inline;
    }

    #nav_sub_page ul li a {
        display: inline-block;
        width: 25px;
        height: 25px;
    }

</style>

效果图:

=======================================傲娇的分割线.=======================================

我的css:

#navigator {
    text-align: center;
}

#navigator ul{
    display: inline-block;
}
#navigator ul li {
    display: inline;
    margin: 0 0 0 0;
    width:120px;
    height:60px;
}
#navigator ul li a {
    display: inline-block;
    float: none;
}

#navList li:hover{
    background-color:#00a1d6;
    background-position:-714px -72px;
    border-color:#00a1d6
    opacity:.55!important;
}

 此外, 修改后有个问题: 手机端查看出现个问题, 菜单鸟到一块去了,并且点击后发现也并未居中. 如下图. 这是个问题, 因为之前未修改前手机端查看并未出现这种现象, 没深究, 不知为何?(不单是这个问题, 页面排版都乱, 右侧部分排到下面了) wordpress的主题基本都会设计为兼容手机端, 平板, 电脑端等. 博客园不支持? 这个问题留给有心人吧, 希望看到这个问题的朋友不吝赐教~

 

 

以上是关于该问题的小结, 有问题可以互相探讨.~欢迎推荐优质博客和网站~