刪除CSS中的邊框

-1

我想在「新增功能」和「用餐想法」之後刪除額外的邊框，我嘗試在<ul>而不是<li>中選擇第一個孩子，它甚至沒有工作。刪除CSS中的邊框

html { 
 
    background-color: white ; 
 
} 
 
body { 
 
    background-color: white ; 
 
    margin: 0 auto; 
 
    width: 960px; 
 
    font-family: arial,helvetica,sans-serif; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: #373535 ; 
 
} 
 
header { 
 
    background-color: #ede6e6; 
 
    height:150px; 
 
    padding-top: 20px; 
 
} 
 
ul { 
 
    padding: 0 ; 
 
} 
 
li{ 
 
    display: inline; 
 
    padding: 10px; 
 
    font-size: 16px; 
 
} 
 
header li :first-child { 
 
    border-right: 1px solid #373535; 
 
    padding-right: 10px; 
 
}

<!DOCTYPE html> 
 
<html lang= "en" > 
 
    <head> 
 
    <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> 
 
     <div class="Left"> 
 
     <ul> 
 
      <li> <a href="">Popular recipes</a> </li> 
 
      <li><a href="">Whats New</a> </li> 
 
     </ul> \t 
 
     </div> 
 
     <div class="Right"> 
 
     <ul> 
 
      <li> <a href="">Categories</a> </li> 
 
      <li><a href="">Meal Ideas</a> </li> 
 
     </ul> \t 
 
     </div> 
 
     <div id="logo"> 
 
     <img src="images/chefs-hat.png"/> 
 
     <p>My recipes</p> 
 
     </div> 
 
    </header> 
 
    </body> 
 
</html>

來源

2016-08-24 Riadh

使用此：

.Left ul li:last-child a,.Right ul li:last-child a { 
    border: none; 

    }

html { 
 
\t background-color: white ; 
 
} 
 
    
 
    body { 
 
    \t background-color: white ; 
 
    \t margin: 0 auto; 
 
    \t width: 960px; 
 
    \t font-family: arial,helvetica,sans-serif; 
 
    \t 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #373535 ; 
 
    
 
} 
 

 
header { 
 
\t background-color: #ede6e6; 
 
\t height:150px; 
 
\t padding-top: 20px; 
 
} 
 

 
ul { 
 
\t padding: 0 ; 
 
} 
 

 
li{ 
 
\t display: inline; 
 
\t padding: 10px; 
 
\t font-size: 16px; 
 
} 
 
header li :first-child { 
 
    \t border-right: 1px solid #373535; 
 
    \t padding-right: 10px; 
 

 
    } 
 

 
.Left ul li:last-child a,.Right ul li:last-child a { 
 
    border: none; 
 
    
 
    }

<!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>

來源

2016-08-24 17:17:43 kukkuz

在這裏你去： CSS：

body { 
background-color: white ; 
margin: 0 auto; 
width: 960px; 
font-family: arial,helvetica,sans-serif; 
} 
a { 
text-decoration: none; 
color: #373535 ; 
} 
header { 
background-color: #ede6e6; 
height:150px; 
padding-top: 20px; 
} 
ul { 
padding: 0 ; 
} 
li{ 
display: inline; 
padding: 5px; 
margin: 5px; 
font-size: 16px; 
} 
ul li:first-child { 
border-right: 1px solid #373535; 
padding-right: 10px; 
width: 9%; 

}

來源

2016-08-24 18:34:18 Sazz

我試過這段代碼，它在第二個列表項後仍然給了我一個邊框，它應該在這個代碼中的第一個孩子上只添加一個邊框嗎？ – Riadh

是的，我確實在Chrome上運行了代碼。請檢查一下。 – Sazz

刪除CSS中的邊框

回答

相關問題