html - 在 CSS 菜单中显示 Logo

Question

我想在我的导航菜单中放置一个 Logo ，像这样 http://prntscr.com/8rwb4i .我尝试了很多代码，但我无法让它工作。代码可以在fiddle中找到http://jsfiddle.net/askoc4qh/

body {
	width:960px;
	font-family: 'Open Sans', sans-serif;
	margin:5px auto; 
	padding:0 auto;
	
	}

ul {
	height:60px;
    width:100%px;
    margin:0 auto;
    padding:0; 
    list-style-type:none;
	
	}

li {
	float:left;
	width:240px;
	}

ul a {
	color:black;
	text-decoration:none;
	font-size:19px;
	display:block;
	
	}
	
ul li a {
	display:block;
	padding:20px 45px;
	line-height:1.0em;
	text-decoration:none;
	transition:500ms ease;
}
ul li ul {
	visibility: hidden;
}
	

ul a:hover {
	
	color:yellow; 
	background-color:black; 
	
	}

<div class="navigation">
	<ul>
	<li><a href = 'index.html'>Home</a></li>
	<li><a href = 'media.html'>Media Design</a></li>
	<li><a href = 'innovatie.html'>Innovatieroutes</a>
	<li><a href = 'info.html'>Opleiding</a></li>
	<li><a href = 'info.html'>Fontys</a></li>
	<li><a href = 'info.html'>Toekomst</a></li>
	<li><a href = 'contact.html'>Contact</a></li>
</ul>
</div>

Answer 1

如果您希望您的 Logo 完全适合 <li> ，而不是试试这个:

HTML

<div class="navigation">
  <ul>
    <li><a href = 'index.html'>Home</a></li>
    <li><a href = 'media.html'>Media Design</a></li>
    <li><a href = 'innovatie.html'>Innovatieroutes</a>
    <li><a href = 'info.html'>Opleiding</a></li>
    <li><a href = 'info.html'>Fontys</a></li>
    <li><a href = 'info.html'>Toekomst</a></li>
    <li><a href = 'contact.html'>Contact</a></li>
    <li><img src="https://shopsocially.com/wp-content/uploads/2014/10/GreyBackground-48.jpg"></li>
  </ul>
</div>

CSS

body {
  width:960px;
  font-family: 'Open Sans', sans-serif;
  margin:5px auto; 
  padding:0 auto;
}

ul {
  height:60px;
  width:100%px;
  margin:0 auto;
  padding:0; 
  list-style-type:none;
}

li {
  float:left;
  width:240px;
  height: 59px;
  overflow: hidden; /*cuts the img*/
}

ul a {
  color:black;
  text-decoration:none;
  font-size:19px;
  display:block;
}

ul li a {
  display:block;
  padding:20px 45px;
  line-height:1.0em;
  text-decoration:none;
  transition:500ms ease;
}

ul li ul {
  visibility: hidden;
}

ul a:hover {    
  color:yellow; 
  background-color:black; 
}

img{
  width:100%;
}

还有一个方法可以改善你的问题，你可以删除overflow: hidden;并设置:

img{
  width: 100%;
  /*new line*/
  height: 100%; /*Doesn't cut your img*/
}

你也可以看看jsfiddle