为了账号安全,请及时绑定邮箱和手机立即绑定

去除默认边距后,li标签还是存在右边距?求大神指教

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>日历</title>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>

    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #div1{
            width:240px;
            background: #999;
            margin:50px auto;
        }
        #div1>ul li{
            width:60px;
            list-style:none;
            display: inline-block;
            background: black;
            color:white;
        }
    </style>
</head>
<body>
<div id="div1">
    <ul>
        <li><h2>1</h2>JAN</li>
        <li><h2>1</h2>JAN</li>
        <li><h2>1</h2>JAN</li>
        <li><h2>1</h2>JAN</li>
        <li><h2>1</h2>JAN</li>
        <li><h2>1</h2>JAN</li>
        <li><h2>1</h2>JAN</li>
        <li><h2>1</h2>JAN</li>
        <li><h2>1</h2>JAN</li>
    </ul>
</div>
</body>
</html>


正在回答

3 回答

找到解决办法了。

空白节点(多由于Enter造成),li不换行可以解决问题。

font-size=0这个方法楼上已经有人答了(记得ul元素设置font-size:0后li元素重置回来比如 li {font-size: 14px}), 另外一种解决方案: ul {lette-spacing: -1em;} li {letter-spacing: normal}; 某些情况下, 后面这种方法更实用 :)  源自StackOverflow: https://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items

0 回复 有任何疑惑可以回复我~

https://img1.sycdn.imooc.com//5d43abef0001a83b07340604.jpg

还是不行,div的外边距跟里面没关系吧,可能我的意思没说明确,图片就是我想表达的意思,我的目的是要把这些li之间没有空隙,也就是一行可以刚好放4个,发现其实不是li的问题,我换成div也一样存在空隙,不知道为什么会保留这么些空隙

1 回复 有任何疑惑可以回复我~

li的已经去掉了呀,你去掉你div的margin:50px auto;看下。 不信的话可以看浏览器的盒模型。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

去除默认边距后,li标签还是存在右边距?求大神指教

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信