zoukankan      html  css  js  c++  java
  • 清除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的主题基本都会设计为兼容手机端, 平板, 电脑端等. 博客园不支持? 这个问题留给有心人吧, 希望看到这个问题的朋友不吝赐教~

     

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

  • 相关阅读:
    《leetcode42接雨水》
    《84. 柱状图中最大的矩形》
    [bzoj1565][NOI2009]植物大战僵尸
    [bzoj1497][NOI2006]最大获利
    [洛谷P4092][HEOI2016/TJOI2016]树
    [洛谷P3760][TJOI2017]异或和
    [洛谷P3758][TJOI2017]可乐
    [洛谷P3761][TJOI2017]城市
    [Uva11134]Fabled Rooks
    又是一年叶落时
  • 原文地址:https://www.cnblogs.com/yadongliang/p/9326404.html
Copyright © 2011-2022 走看看