gpt4 book ai didi

html - 填充不会填充
  • interly
  • 转载 作者:太空宇宙 更新时间:2023-11-04 03:51:58 25 4
    gpt4 key购买 nike

    我正在尝试创建一个高度为 40 像素并占浏览器宽度 80% 的简单菜单栏。

    这里的问题是我试图使文本居中,但是当使用不同的颜色(一种用于 div,另一种用于 ul,另一种用于 li)查看它时,我看到一个小像素未填充<a> 的填充.

    填充它的唯一解决方案是将填充设为 10.35px 而不是 10px 或 11px。

    HTML:

    <html>
    <head>
    <meta charset="utf-8" />
    <title>myWebSite</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div id="menu">
    <ul>
    <li>
    <a href="www.google.com">Hello</a>
    </li>
    <li>
    <a href="www.google.com">Hello</a>
    </li>
    <li>
    <a href="www.google.com">Hello</a>
    </li>
    <li>
    <a href="www.google.com">Hello</a>
    </li>
    <li>
    <a href="www.google.com">Hello</a>
    </li>
    <li>
    <a href="www.google.com">Hello</a>
    </li>
    </ul>
    </div>
    </body>
    </html>

    还有 CSS:

    body, html {
    width : 100%;
    margin : 0;
    }

    #menu {
    background-color : black;
    width : 100%;
    height : 40px;
    }

    ul {
    list-style : none;
    height : 100%;
    background-color : yellowgreen;
    }

    li {
    margin : 0;
    padding : 0;
    float : left;
    line-height : 40px;
    background-color : blue;
    }

    a {
    margin : 0;
    text-decoration : none;
    color : white;
    font-weight : bold;
    padding : 10px 5px;
    background-color : blueviolet;
    }

    a:hover {
    background-color : orange;
    }

    任何人都可以向我解释为什么会发生这种情况以及我应该使用什么更好的解决方案来做到这一点?

    最佳答案

    display:block 添加到 a 元素,然后取消垂直填充。 http://jsfiddle.net/L8dpB/

    关于html - 填充不会填充 <li> 和 <div> interly,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23253814/

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