顯示與 HTML 和 CSS 中的菜單項內聯的徽標

Question

我正在嘗試在 HTML 和 CSS 的頂端顯示徽標。

但是，徽標圖像大小不會減小到指定的寬度和高度，而且我沒有看到它在其他任何地方被覆蓋。

代碼如下：

 /*********************************************************************************/ /* 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小提琴