試圖從標題中的圖像中刪除所有樣式

Question

我想在導航欄的右側添加linkedin圖標（id =「linkedin」）。我認爲最簡單的方法是在導航欄中添加一個新的UL元素，但是拉伸圖像並且無法使應用的樣式消失。

我試過所有：初始和所有：恢復，但他們似乎並沒有工作。

您需要在整頁上打開該片段。

.container { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 94%; 
 
    max-width: 1100px; /*Stops the nav from expanding too far*/ 
 
    font-family: helvetica, sans-serif; 
 
} 
 
#nav { 
 
    position: absolute; /*Positions nav elements within black space*/ 
 
    right: 0; /*Positions nav elements to right of screen*/ 
 
    top: -15px; /*Positions nav elements to top of screen*/ 
 
    height: 60px; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
} 
 
#header { 
 
    z-index: 2; /*Puts elements in front of other elemtns*/ 
 
    position: fixed; 
 
    width: 100%; /*Makes nav stretch to screen*/ 
 
    height: 60px; /*Specifies black background height*/ 
 
    line-height: 60px; /*Vertically centers nav text*/ 
 
    background: #222; 
 
    color: white; /*Text color*/ 
 
} 
 
/*LOGO*/ 
 
#header img { 
 
    width: 180px; 
 
    height: 60px; 
 
} 
 
#header h1 { 
 
    top: 0px; 
 
    margin: 0px; 
 
    font-size: 1.75em; 
 
} 
 
#nav ul li { 
 
    float: left; 
 
    list-style: none; 
 
} 
 
#nav ul li a { 
 
    display: block; 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 0 10px; 
 
} 
 
/*Nav Dropdown*/ 
 
ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    background: #222; 
 
    padding: 0; 
 
    white-space: nowrap; /*Prevents dropdown elements from wrapping*/ 
 
} 
 
#nav ul ul li { 
 
    float: none; 
 
} 
 
> ul { 
 
    display: block; 
 
} 
 
#linkedin { 
 
    all: revert; 
 
} 
 
/**********RESPONSIVE**********/ 
 
/* unvisited link */ 
 
a:link { 
 
    color: blue; 
 
} 
 
/* mouse over link - Nav*/ 
 
#nav a:hover { 
 
    color: black; 
 
    \t background-color: gold; 
 
} 
 
/* mouse over link - regular*/ 
 
.back a:hover { 
 
    color: blue; 
 
} 
 
/* selected link */ 
 
a:active { 
 
    color: blue; 
 
} 
 
/*Inactive Link*/ 
 
.inactivelink { 
 
    cursor: default; 
 
}

<header id="header"> 
 
    <div class="container"> 
 
     <img src="#" alt="LOGO"/> 
 
     <nav id="nav"> 
 
      <ul> 
 
      <li><a href="#">Portfolio</a> 
 
      </li> 
 
      <li> 
 
       <a href="#" class="inactivelink">Projects</a> 
 
       <ul> 
 
        <li><a href="#">BOOK REVIEW SITE</a></li> 
 
        <li><a href="#" style="";>DEMO CODE (under development)</a></li> 
 
       </ul> 
 
      </li> 
 
      <li> 
 
       <a href="#"class="inactivelink">Contact</a> 
 
       <ul> 
 
        <li><a href="#"><p style="color:#449ff4">LinkedIn</p></a></li> 
 
        <li><a href="">Email Me</a></li> 
 
       </ul> 
 
      </li> 
 
      <li> 
 
       <a href="#"><img id="linkedin" src="#" alt="LinkedIn icon" height="10" width="10"></a> 
 
      </li> 
 
      </ul> 
 
     </nav> 
 
     </div> 
 
    </header>

Answer 1

我先在你自己的負載復位樣式，所以它會擺脫無論你是繼承的。我想這會解決它。 http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/

Answer 2

您的樣式中存在一個用於「標題img」的CSS規則，這會強制標題中的所有圖片具有180px的寬度。欲覆蓋你的LinkedIn圖標，並在其原尺寸顯示它，在你的樣式表的末尾添加此CSS：如果顯示過大或過小，以致方式圖標

#header #linkedin { 
    width: auto; 
    height: auto; 
    vertical-align: middle; 
} 

，只需用你想要的大小而不是auto，但只在兩個/寬度/高度中的一個上） - 另一個會自動調整。

.container { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 94%; 
 
    max-width: 1100px; 
 
    /*Stops the nav from expanding too far*/ 
 
    font-family: helvetica, sans-serif; 
 
} 
 

 
#nav { 
 
    position: absolute; 
 
    /*Positions nav elements within black space*/ 
 
    right: 0; 
 
    /*Positions nav elements to right of screen*/ 
 
    top: -15px; 
 
    /*Positions nav elements to top of screen*/ 
 
    height: 60px; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
} 
 

 
#header { 
 
    z-index: 2; 
 
    /*Puts elements in front of other elemtns*/ 
 
    position: fixed; 
 
    width: 100%; 
 
    /*Makes nav stretch to screen*/ 
 
    height: 60px; 
 
    /*Specifies black background height*/ 
 
    line-height: 60px; 
 
    /*Vertically centers nav text*/ 
 
    background: #222; 
 
    color: white; 
 
    /*Text color*/ 
 
} 
 

 

 
/*LOGO*/ 
 

 
#header img { 
 
    width: 180px; 
 
    height: 60px; 
 
} 
 

 
#header h1 { 
 
    top: 0px; 
 
    margin: 0px; 
 
    font-size: 1.75em; 
 
} 
 

 
#nav ul li { 
 
    float: left; 
 
    list-style: none; 
 
} 
 

 
#nav ul li a { 
 
    display: block; 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 0 10px; 
 
} 
 

 

 
/*Nav Dropdown*/ 
 

 
ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    background: #222; 
 
    padding: 0; 
 
    white-space: nowrap; 
 
    /*Prevents dropdown elements from wrapping*/ 
 
} 
 

 
#nav ul ul li { 
 
    float: none; 
 
} 
 

 
>ul { 
 
    display: block; 
 
} 
 

 
#linkedin { 
 
    all: revert; 
 
} 
 

 

 
/**********RESPONSIVE**********/ 
 

 

 
/* unvisited link */ 
 

 
a:link { 
 
    color: blue; 
 
} 
 

 

 
/* mouse over link - Nav*/ 
 

 
#nav a:hover { 
 
    color: black; 
 
    background-color: gold; 
 
} 
 

 

 
/* mouse over link - regular*/ 
 

 
.back a:hover { 
 
    color: blue; 
 
} 
 

 

 
/* selected link */ 
 

 
a:active { 
 
    color: blue; 
 
} 
 

 

 
/*Inactive Link*/ 
 

 
.inactivelink { 
 
    cursor: default; 
 
} 
 

 
#header #linkedin { 
 
    width: auto; 
 
    height: auto; 
 
    vertical-align: middle; 
 
}

<header id="header"> 
 
    <div class="container"> 
 
    <img src="#" alt="LOGO" /> 
 
    <nav id="nav"> 
 
     <ul> 
 
     <li><a href="#">Portfolio</a> 
 
     </li> 
 
     <li> 
 
      <a href="#" class="inactivelink">Projects</a> 
 
      <ul> 
 
      <li><a href="#">BOOK REVIEW SITE</a></li> 
 
      <li><a href="#" style="" ;>DEMO CODE (under development)</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#" class="inactivelink">Contact</a> 
 
      <ul> 
 
      <li> 
 
       <a href="#"> 
 
       <p style="color:#449ff4">LinkedIn</p> 
 
       </a> 
 
      </li> 
 
      <li><a href="">Email Me</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#"><img id="linkedin" src="http://placehold.it/30x30/0fa" alt="LinkedIn icon" height="10" width="10"></a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header>