在CSS列表項目

我想添加列表項目之間的邊界，我正在跟隨教程，並在視頻中鍵入相同的確切代碼（我沒有在這裏包括所有的CSS代碼）。問題是第一個列表項目和第二個列表項目之間沒有空白或空格。之後還有一個額外的邊框。在CSS列表項目

header li :first-child { 
 
\t border-right: 1px solid #373535; 
 

 
}

<!DOCTYPE <!DOCTYPE html> 
 
<html lang= "en" > 
 
<head> 
 
\t <title> My Recipe </title> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <script src="js/html5shiv.js"></script> 
 
<!-- yolo this is my first project --> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    \t <div class="Left"> 
 
    \t  <ul> 
 
    \t   <li> <a href="">Popular recipes</a> </li> 
 
    \t   <li><a href="">Whats New</a> </li> 
 
    \t  </ul> \t 
 
    \t </div> 
 

 
    \t <div class="Right"> 
 
    \t  \t <ul> 
 
    \t   <li> <a href="">Categories</a> </li> 
 
    \t   <li><a href="">Meal Ideas</a> </li> 
 
    \t  </ul> \t 
 
    \t </div> 
 

 
    \t <div id="logo"> 
 
    \t  \t <img src="images/chefs-hat.png"/> 
 
    \t  \t <p>My recipes</p> 
 
    \t </div> 
 
</header> 
 

 

 
</body> 
 

 

 
</html>

結果：

the result

來源

2016-08-24 Riadh

工藤對了'<！ - YOLO這是我的第一個項目 - >' – Roberrrt

試試這個CSS

header li *:first-child { 
    border-right: 1px solid #373535; 
    padding-right: 10px; 
}

來源

2016-08-24 10:13:39 Friend

嘗試空白移動到<a>標籤即內。

<li><a href="">Popular recipes </a></li>

如果你不想在第二列表項的邊界，那麼你的CSS應該把目標定<ul>不<li>。然後，這會嘗試定位<ul>標記的第一個孩子。

header ul:first-child { 
    border-right: 1px solid #373535; 
}

來源

2016-08-24 10:14:58 Lee

它並沒有改變任何東西 – Riadh

你確定嗎？你是否刪除了原來在'li'和'：first-child'之間的空間？ – Lee

您可以嘗試重新編寫您的問題，因爲它不太清楚您要做什麼。通過'邊界'你是指一個管道？ – Lee

DEMO

CSS

ul { 
    list-style:none; /* will remove bullets and the space before the list will be gone as no bullet*/ 
} 

li { 
    border-right:1px solid #000; /* add border as you like */ 
    display:inline-block; /* to make it inline */ 
    padding:20px; /* will decide space between border and content as per box model*/ 
}

來源

2016-08-24 10:36:50 4dgaurav

在CSS列表項目

回答

相關問題