调整导航栏中间的图像？

Question

 [avplayerObject addObserver:self forKeyPath:@"status" options:0 context:nil];

#pragma Observer for Player status.
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
    if (object == _audioPlayer && [keyPath isEqualToString:@"status"]) {
        if (_audioPlayer.status == AVPlayerStatusFailed) {
            NSLog(@"AVPlayer Failed");
            loader.hidden = true;
        } else if (_audioPlayer.status == AVPlayerStatusReadyToPlay) {
            NSLog(@"AVPlayerStatusReadyToPlay");
                [_audioPlayer play];

        } else if (_audioPlayer.status == AVPlayerItemStatusUnknown) {
            NSLog(@"AVPlayer Unknown");

        }
        [_audioPlayer removeObserver:self forKeyPath:@"status" context:nil];
    }

}

    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;
    }

以上代码是我到目前为止设计我的网站的方式;但是，如果我在条形图的中间添加图像，则条形图会变宽以适合图像！

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

Answer 1

试试这个

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;