2016-07-10 2 views
1

UIの構築に取り組んでいましたが、本当に奇妙な問題がありました。ul liのリストにあるCSSの問題

リストは決して色にならず、下線を削除しません。

/*############## Start Mine Style ##############*/ 
 

 
body{ 
 
    background-color: #fff; 
 
} 
 

 
.contaner{ 
 
    width: 1170px; 
 
    margin: auto; 
 
} 
 

 
/*############## End Mine Style ##############*/ 
 

 
/*Start Header*/ 
 
.header{ 
 
    background-color: #666; 
 
    height: 20px; 
 
} 
 
/*End Header*/ 
 

 
/*Start Navbar*/ 
 
.navbar{ 
 
    background-color: #252f31; 
 
    padding: 0; 
 
    color: #fff; 
 
} 
 
.navbar ul{ 
 
    list-style: none; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    display: inline-block; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.navbar ul li{ 
 
    float: left; 
 
    padding: 20px; 
 
    color: #fff; 
 
} 
 
/*End navbar*/
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>PsdToHtml-1!</title> 
 
     <link rel="stylesheet" href="css/style.css"> 
 
     <link rel="stylesheet" href="css/normalize.css"> 
 
    </head> 
 
    <body> 
 
     <div class="header"> 
 
      <div class="slider"> 
 
       Slider 
 
      </div> 
 
     </div> 
 
     <div class="navbar"> \t 
 
      <ul> 
 
       <li><a href="">Raw</a></li> 
 
       <li><a href="">Raw</a></li> 
 
       <li><a href="">Raw</a></li> 
 
       <li><a href="">Raw</a></li> 
 
       <li><a href="">Raw</a></li> 
 
       <li><a href="">Raw</a></li> 
 
       <li><a href="">Raw</a></li> 
 
       <li><a href="">Raw</a></li> 
 
      </ul> 
 
     </div> 
 
    </body> 
 
</html>

答えて

6

あなたはli要素ではなく、a要素をスタイリングしています。

このルールを追加してください:

.navbar ul li a { 
    color: inherit; 
    text-decoration: none; 
} 
+1

はまた、あなたの 'normalize.css'ファイルの後にあなたの' style.css'ファイルをロードします。これにより、正規化ファイルによって加えられた変更を上書きすることができます。 – cameck

+0

あなたの私のヒーローの仲間に感謝します:) –

+0

@mohamedsaedもしそれが役に立ちましたら、答えを受け入れるようにしてください。 –