Question

我想在导航菜单中添加徽标，例如http://prntscr.com/8rwb4i。我尝试了很多代码，但我无法让它工作。代码可以在小提琴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

您可以在上一个<li>中添加徽标

<li><a href = 'info.html'>Toekomst</a></li>
<li><a href = 'contact.html'>Contact</a></li>
<li><a><img src="yourlogo.png"></a> </li>

jsfiddle

Answer 2

如果您希望徽标完全适合<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

在CSS菜单中显示徽标

2 个答案: