html - 在 HTML 和 CSS 中显示与菜单项内联的 Logo

Question

我正在尝试在 HTML 和 CSS 的顶端显示 Logo 。

但是， Logo 图像的大小没有减小到指定的宽度和高度，我没有看到它在其他任何地方被覆盖。

代码如下:

/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

#banner 
{
  overflow: hidden;
  height: 300px;
  position: relative;
  background: url(images/pic01.jpg) no-repeat center;
  background-size: cover;
}

#banner .image
{
}
#banner p{
  position: absolute; 
  top:30%;
  left: 40%;
  width: 100px;
  padding: 5px; 
  margin: 5px;
  font-family: 'Lobster', cursive;
  font-weight: bold; 
  font-size: 55px;
  color: #fff;
}

/** MENU */

#menu-wrapper
{
  background: #16a085;
  overflow:auto;
}

#menu {
  overflow: hidden;
  height: 100px;
  float:left;
}

#menu ul {
  margin: 0;
  padding: 0px 0px 0px 0px;
  list-style: none;
  line-height: normal;
  text-align: center;
}

#menu li {
  display: inline-block;
}

#menu a {
  display: block;
  letter-spacing: 1px;
  padding: 0px 40px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.80em;
  line-height: 100px;
  border: none;
  color: #FFF;
}

#menu a:hover, #menu .current_page_item a {
  text-decoration: none;
}

#menu .current_page_item a {
  background: #1abc9c;
}

#Logo{
  width:10px;
  height:30px;
  float: left;
  margin-top: 5px;
}

<div id="wrapper">
  <div id="menu-wrapper">
    <div id = "Logo" >
      <img src="images/Logo.jpg" ></img>
  </div>
  <div id="menu" class="container">

    <ul>
      <li class="current_page_item"><a href="#">Homepage</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  /*and so on */
</div>

看起来像这样:

横幅中的白色部分是占用宽度的图像，尽管已将宽度属性设置为 10 像素。

Answer 1

在您的 CSS 中。将#Logo 的样式更改为#Logo img{}。您必须将宽度设置为 img 标签。不是它的父容器。

#Logo img{
width:100px;
height:30px;
float: left;
margin-top: 5px;
}

JS Fiddle