gpt4 book ai didi

html - 如何使 在导航菜单中的
  • 中具有全宽?
  • 转载 作者:太空宇宙 更新时间:2023-11-03 23:26:04 26 4
    gpt4 key购买 nike

    大家好,我正在尝试实现这种效果,当您将鼠标悬停在 li 的任何部分时,悬停效果会像这个网站一样生效: http://ironsummitmedia.github.io/startbootstrap-landing-page/顶部菜单嗯,这是我的代码:

    <head>
    <style>
    #mody { position:absolute;
    width:100%;
    height:60;
    z-index:15;
    top:0%;
    left:0%;
    background:red;}

    #logo {
    margin-left:250px;
    margin-top:5px;
    }

    #first_nav {
    position:absolute;
    top:0px;
    left:1100px;
    padding:5px;

    }
    #first_nav ul {
    text-decoration:none;
    list-style:none;
    height:inherit;
    }
    #first_nav ul li {
    display:inline;
    margin-right:0px;
    padding:5px;
    float:left;
    background:yellow;
    }
    #first_nav ul li a {
    padding:10px;
    text-decoration:none;

    }
    #first_nav ul li a:hover {
    color:pink;
    }
    </style>
    </head>


    <body>


    <div id='mody'>
    <div id='logo'>
    <a href="#"><img src="mody.jpg" width="50px" height="50px" alt="title"/></a>
    </div>

    <div id="first_nav">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">DADA</a></li>
    </ul>
    </div>

    </div>




    </body>

    附言如果有更多想法如何使我的菜单更好或更好的代码行,请随意编写,我接受各种批评 感谢阅读

    最佳答案

    要让某些东西占据 HTML 中的整行,告诉它显示为 block :

    #first_nav ul li a {
    display: block;
    }

    关于html - 如何使 <a> 在导航菜单中的 <li> 中具有全宽?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26953048/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com