使用內嵌塊li元素刪除無序列表開頭的空格

嗨，朋友（以及互聯網的生物），今天我還有一個問題給大家。請記住，我對網頁設計比較陌生，所以答案可能非常簡單。使用內嵌塊li元素刪除無序列表開頭的空格

我的屏幕左上角有我的社交媒體圖標列表，位於我的導航欄內。我正在使用無序列表，並使用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>

除了......你看到左邊距和Facebook圖標之間的空白嗎？我一直試圖以網絡開發人員最負責任的方式擺脫它 - 但只是給<ul>元素留有餘量，並稱它爲一天並不能滿足我內心的完美主義者。這裏有幫助嗎？

感謝

來源

2016-11-08 Alex Hail

它可能也是h作爲默認填充，您應該將其設置爲0.將'padding：0'添加到'#topFixedNavBar .tfnb_list' –

將'ul'的填充和邊距設置爲'0' –

'ul'元素具有默認填充子彈不會在列表之外結束，這很可能只是刪除填充。您應該學會使用DevTools自己進行調試，這將幫助您減少解決此類問題的時間。 – Ricky

使用padding-left:0擺脫空間上留下你的分度類.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>

來源

2016-11-08 22:11:48 repzero

我的帖子的第一評論有我的解決方案，但無論如何ty！ –

用於UL給予風格像

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

來源

2016-11-08 22:10:24 jafarbtech

這也是gr8 ... D – repzero

使用內嵌塊li元素刪除無序列表開頭的空格

回答

相關問題