Question

我想在导航栏的右侧添加一个linkedin图标（id =＆＃34; linkedin＆＃34;）。我认为最简单的方法是在导航中添加一个新的UL元素但是拉伸图像并且我不能让应用的样式消失。

我已经尝试了所有：初始和全部：还原，但它们似乎无法正常工作。

您想要在整页上打开代码段。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

我首先会在你自己之前加载一个重置样式表，所以它将摆脱你继承的任何东西。我想这会解决它。 http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/

Answer 2

有一个CSS规则，用于`＆＃39; header img＆＃39;在您的样式中，强制标题中的所有图像的宽度为180px。要覆盖您的linkedin图标并以原始大小显示，请在样式表的末尾添加此CSS：

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

如果图标显示得太大或太小，只需使用您想要的尺寸而不是auto，但只能使用两个/宽度/高度中的一个） - 另一个会自动调整。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

尝试从标题中的图像中删除所有样式

2 个答案: