gpt4 book ai didi

html -
    • 元素之间神秘的填充/边距
  • 转载 作者:太空宇宙 更新时间:2023-11-04 04:12:20 25 4
    gpt4 key购买 nike

    当我注意到 <li> 之间的差距时,我正在构建菜单和 <ul> .即使将 margin 和 padding 设置为 0 也不能解决它,我不知道它来自哪里。

    我在下面的示例中隔离了这个问题。

    呈现的代码:http://gyazo.com/a8051a862c08c4dce4ce0b44ab4b271b

    代码:

    <!DOCTYPE html>
    <html>

    <head>
    <style>
    div#container{
    display: inline-block;
    border: 5px solid #00ff00;
    }

    ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: 5px solid #0000ff;

    }

    li{
    display: inline-block;
    border: 5px solid #ff0000;
    width: 30px;
    height: 30px;
    margin: 0px;
    padding: 0px;
    }
    </style>
    </head>

    <body>

    <div id="container">
    <ul >
    <li></li><li></li>
    </ul>
    </div>

    </body>
    </html>

    有趣的是,如果我在 <li> 中写任何东西元素,差距消失。有人可以向我解释发生了什么以及我如何消除这个差距吗?

    最佳答案

    nathan 建议的是一个解决方案,这里是另一个,不使用 inline-block显示格式,因为它有时会产生问题 <ul>没有内容(如您的情况).....此演示使用 floats并且没有内容

    DEMO

    CSS

      li{
    display: block;
    border: 5px solid #CCC;
    width: 30px;
    height: 30px;
    margin: 0px;
    padding: 0px;
    float:left; //added this
    }
    .clearfix {clear:both;}

    HTML

    <div id="container">
    <ul ><li></li><li></li>
    <div class="clearfix" ></div>
    </ul>
    </div>

    关于html - <li> 和 <ul> 元素之间神秘的填充/边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20487951/

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