调整带有图像中间图像的导航栏

Question

    nav
    {
    	display: table;
    	width: 50%;
    	background-color: #333;
    	padding: 0.50em 0.5em;
    	margin: 0.60em auto;
    }
    
    nav ul
    {
    	display: table-row;
    }
    
    nav ul li
    {
    	display: table-cell;
    	text-align: center;
    }
    
    a
    {
       text-decoration:none;
       color: #d9d9d9;
    }
    
    a:hover
    {
    	color: #e6e6e6;
    }

    		<nav>
    			<ul>
    				<li><a href="art.html"> art </a><li>
    				<li><a href="download.html"> download </a></li>
    				<li><a href="home.html"> <img src="image/symbol.png"></a>
    				<li><a href="portfolio.html"> portfolio </a></li>
    				<li><a href="product.html"> product </a></li>
    			</ul>
    		</nav>

上面的代码是我到目前为止设计网站的方式；但是，如果我在栏的中间添加图像，则条宽扩大以适合其中的图像！

答案已经发布，再次感谢！

Answer 1

尝试此

.navContain{
  height:30px;
  width:100%;
  margin:0 auto;
  background-color:red;
  padding-top:30px;
}
nav{
   width: 100%;
   max-width:400px;
   background-color: #333;
   padding:0;
   margin:0 auto;
   overflow:visible;
   height:30px;
}
nav ul{
   overflow:visible;
   height:30px;
  margin:0;
  padding:0;
}   
nav ul li{
  text-align: center;
  overflow:visible;
  height:30px;
  margin:0;
  padding:0;
  list-style-type:none;
  float:left;
  width:20%;
  max-width:80px;
}
a{
  text-decoration:none;
  margin:0;
  padding:0;
  color: #d9d9d9;
  overflow:visible;
  line-height:30px;
  display:block;
  position:relative;
}
a:hover{
  color: #e6e6e6;
}
a img{
  width:90%;
  margin:0;
  padding:0;
  vertical-align:baseline;
  position:absolute;
  bottom:-30px;
  right:5%;
  left:5%;
}

<div class="navContain">
<nav>
    			<ul>
    				<li><a href="art.html"> art </a></li>
    				<li><a href="download.html"> download </a></li>
    				<li><a href="home.html"> <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"></a></li>
    				<li><a href="portfolio.html"> portfolio </a></li>
    				<li><a href="product.html"> product </a></li>
    			</ul>
    		</nav>
</div>