删除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中的边框

回答

相关问题