在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列表项目

回答

相关问题