Html 使用内联块li元素时，请删除无序列表开头的空格

嗨，朋友们（和互联网上的生物们），今天我还有一个问题要问大家。请记住，我对网页设计比较陌生，所以答案可能很简单

我在屏幕左上角的导航栏中有一个社交媒体图标列表。我使用的是无序列表，列表元素使用

display:inline块以水平方式显示我的元素

它工作正常（大部分情况下），看起来如下：



CSS:

HTML:













除了。。。你看到左边距和facebook图标之间的空间了吗？我一直在试图以一个web开发人员最负责任的方式摆脱它——但仅仅给
元素一个负边距，并称之为一天，并不能满足我内心的完美主义者。有人帮忙吗

谢谢你给我这样的风格

#topFixedNavBar .tfnb_list { position: relative; max-height: 32px; margin: 0;padding-left: 0; } 

使用
padding left:0
清除div中class
左侧的空格。tfnb\u list


#topFixedNavBar.tfnb#u列表{
位置：相对位置；
最大高度：32px；
保证金：0；
}
#topFixedNavBar.tfnb\u列表项目{
列表样式类型：无；
位置：相对位置；
显示：内联块；
宽度：30px；
高度：30px；
保证金：0；
}
.tfnb_列表{
边框：纯红；
左侧填充：0；
}









它可能还有一个默认的填充，您应该将其设置为0。将
padding:0
添加到
#topFixedNavBar。tfnb#U list
将
ul
上的填充和边距设置为
0
ul
元素具有默认填充，以便项目符号不会出现在列表之外，很可能就是这样，只需删除填充即可。你应该学会使用DevTools自己调试它，它将帮助你减少解决这类问题的时间！这也是gr8…：D
<div id = "topFixedNavBar">
            <div class = "tfnb_content">
                    <ul class = "tfnb_list">
                        <li class = "tfnb_list_item" id = "tfnb_list_item_facebookIcon">
                            <img class = "tfnb_list_item_facebookIcon_img" src="images/facebook-icon-preview.png"/>
                        </li>
                        <li class = "tfnb_list_item" id = "tfnb_list_item_youtubeIcon">
                            <img class = "tfnb_list_item_youtubeIcon_img" src="images/YouTube_Play.png"/>
                        </li>
                        <li class = "tfnb_list_item" id = "tfnb_list_item_instagramIcon">
                            <img class = "tfnb_list_item_instagramIcon_img" src="images/Instagram-logo-round.png"/>
                        </li>
                    </ul>
            </div>
</div>

#topFixedNavBar .tfnb_list { position: relative; max-height: 32px; margin: 0;padding-left: 0; }