элементы списка в 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

Кудо-х для '' – 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

ответ

Смежные вопросы