Question

嗨朋友（以及互联网的生物），今天我还有另外一个问题。请记住，我对网页设计相对较新，所以答案可能非常简单。

我的导航栏中的屏幕左上角有这个社交媒体图标列表。我正在使用无序列表并使用display: inline-block;使用列表元素以水平方式显示我的元素。

工作正常（大部分时间）并且看起来像这样：

CSS：

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

#topFixedNavBar .tfnb_list_item {
    list-style-type: none;
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0;
}

HTML：

<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>

除了......你看到左边距和脸部图标之间的空格？我一直试图以最负责任的方式摆脱它，而网络开发人员可以 - 但只是给<ul>元素一个负余量并称之为一天并不能让我满意的是完美主义者。这里有什么帮助吗？

由于

Answer 1

使用padding-left:0删除div中左侧的空格.tfnb_list

#topFixedNavBar .tfnb_list {
  position: relative;
  max-height: 32px;
  margin: 0;
}
#topFixedNavBar .tfnb_list_item {
  list-style-type: none;
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0;
}
.tfnb_list{
border:solid red;
  padding-left: 0;
}

<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>

Answer 2

对于ul给出类似

的样式

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

使用内联块li元素

2 个答案: