CSSのリスト項目

リスト項目の間に枠線を追加したいのですが、私はチュートリアルに従っていますし、動画で同じ正確なコードを入力しました（ここにはすべてのCSSコードは含まれていません）。問題は、最初のリスト項目と2番目のリスト項目の間に余白やスペースがないことです。後に余分なボーダーもあります。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

が<a>タグすなわち内側に空白を移動してみてください

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

出典

2016-08-24 10:13:39 Friend

このCSSを試してみてください。

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

あなたは、あなたのCSSは<ul>ない<li>をターゲットにする必要があり、2番目のリスト項目の境界線をしたくない場合。これにより、<ul>タグの最初の子をターゲティングします。

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

出典

2016-08-24 10:14:58 Lee

それは何も – Riadh

を変更didntのよろしいですか？あなたは元々 '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

答えて

関連する問題