列表样式没有应用+ li边界

我正在测试垂直导航，并想从我的ul中删除子弹。我甚至试过申请！重要的情况下，有一个覆盖。我李的下边框也不适用。我在网上进行了研究，但找不到解决方案。列表样式没有应用+ li边界

的 “导航” ID内没有将适用除外

#nav a { 
    text-decoration: none; 
}

链接codepen：https://codepen.io/Saharalara/pen/WpPgpJ

下面是HTML：

<!Doctype html> 
<html> 
<head> 
    <title>About Us</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div id="nav"> 
    <ul> 
     <li><a href="#">Mission</a></li> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Executive Team</a> 
      <ul> 
     <li><a href='#'>&raquo; CEO</a> 
     <li><a href='#'>&raquo; CFO</a> 
     <li><a href='#'>&raquo; COO</a> 
     <li><a href='#'>&raquo; Other Minions</a> 
     </ul> 
    </li> 
    <li><a href='#'>Contact Us</a></li> 
    </ul> 
    </div> 

    <div id="content"> 
    <h1>About Us</h1> 
    <ul> 
    <p><li><a href="#">Mission</a> Lorem ipsum dolor sit amet, ultricies adipiscing lectus, pharetra mauris amet luctus, ac vitae pulvinar, aenean urna porttitor eu etiam eu non. Accumsan tortor sit ac integer. Ipsum occaecat ad ipsum vestibulum, pellentesque posuere, sit enim curabitur odio.</li> 

     <li><a href="#">History</a> Ut at montesdui ullam orci, justo leo sem vitae sit quam, quis massa cras volutpat eget ac a.</li> 

     <li><a href="#">Executive team</a> Vitaeconvallis duis, dui adipiscing felis quam, laoreet nec non, lectus massa morbi et, amet nec in lacus urna.</li> 

     <li><a href="#">Contact us</a> Proin enim venenatis diam nascetur odio, nullam dui nam mauris quisque dignissim, eleifend sed platea ut, risus temporibus ante eu, dui eros libero ultrices eget non. Iaculis mauris nulla phasellus vel, pede nunc et libero mauris ac, erat volutpat non netus sed risus sed, dignissim aenean sit curabitur.</li> 
     </p> 
     </ul> 
    </div> 
</body> 
</html>

的CSS：

body { 
    font: 12pt Verdana, Arial, Georgia, sans-serif; 
} 

#nav { 
    width:150px; 
    float:left; 
    margin-top:12px; 
    margin-right:18px; 
} 



#nav a { 
    text-decoration: none; 
} 


//making sure there are no extra padding or margins lying around to line up with ABOUT US content 

#nav ul { 
    list-style-type: none; 
    margin: 12px 0px 0px 0px; 
    padding: 0px; 
} 

//border for visual seperation 

#nav li { 
    border-bottom: 1px solid #ffffff; 
} 



#nav li a:link, #nav li a:visited { 
    font-size: 10pt; 
    font-weight: bold; 
    display: block; 
    padding: 3px 0px 3px 3px; 
    background-color: #628794; 
    color: #ffffff; 
} 

//higlight when hover 

#nav li a:hover, #nav li a:active { 
    font-size: 10pt; 
    font-weight: bold; 
    display: block; 
    padding: 3px 0px 3px 3px; 
    background-color: #6cac46; 
    color: #000000; 
} 

#content { 
    width:550px; 
    float: left; 
} 

#content a { 
    text-decoration: none; 
    font-weight: bold; 
}

来源

2017-04-02 Sarah

试试这个https://jsfiddle.net/ak6vgcbu/ –

您的代码的问题不是选择器，而是评论。

如果您使用原始CSS，你需要使用的块注释，因为行内注释将导致一个错误，然后你的CSS将不处理的其余部分。 text-decoration的工作原因是因为它发生在您的第一个内嵌评论之前。

变化

//making sure there are no extra padding or margins lying around to line up with ABOUT US content

到

/* making sure there are no extra padding or margins lying around to line up with ABOUT US content */

来源

2017-04-02 23:28:30

太谢谢你了基督教。真不敢相信我忽视了。 – Sarah

列表样式没有应用+ li边界

回答

相关问题