2015-08-03 64 views
0

完美的我在html写了一个短码的视频如下:
code:视频元素不是HTML

#footer { 
 
    background: #166bb3; 
 
    height: 350px; 
 
} 
 
.imgdiv { 
 
    width: 100%; 
 
    background-color: #E9E9E9; 
 
    box-shadow: 0px 9px 5px -3px #000; 
 
} 
 
#footerItems { 
 
    min-width: 1024px; 
 
    width: 90%; 
 
    padding-left: 10%; 
 
} 
 
#footerItems div { 
 
    display: inline-block; 
 
    color: #FFF; 
 
    padding-top: 2%; 
 
    font-weight: bold; 
 
    font-size: 16px; 
 
} 
 
.accountPos { 
 
    padding-left: 8%; 
 
} 
 
#footerItems div ul { 
 
    padding-left: 0; 
 
} 
 
#footerItems div ul li { 
 
    list-style-type: none; 
 
    font-weight: 400; 
 
    font-size: 13px; 
 
    font-style: italic; 
 
} 
 
#videoptions { 
 
    height: 74px; 
 
    width: 23px; 
 
    background-color: #27374d; 
 
}
<div id="footer"> 
 
    <div class="col-lg-12 imgdiv"> 
 
    <img src="images/Bistip-in-media.png" style="padding-left: 17%;"> 
 
    </div> 
 
    <div id="footerItems" class="col-md-12"> 
 
    <div>About Us 
 
     <ul> 
 
     <li>About us</li> 
 
     <li>Media reviews</li> 
 
     <li>Bistip guide</li> 
 
     </ul> 
 
    </div> 
 
    <div class="accountPos">Account Information 
 
     <ul> 
 
     <li>About us</li> 
 
     <li>Media reviews</li> 
 
     <li>Bistip guide</li> 
 
     </ul> 
 
    </div> 
 
    <div class="accountPos">Market 
 
     <ul> 
 
     <li>About us</li> 
 
     <li>Media reviews</li> 
 
     <li>Bistip guide</li> 
 
     </ul> 
 
    </div> 
 
    <div class="accountPos">Bistip 
 
     <ul> 
 
     <li>About us</li> 
 
     <li>Media reviews</li> 
 
     <li>Bistip guide</li> 
 
     </ul> 
 
    </div> 
 
    <div class="accountPos" style="width: 37%; min-width: 120px"> 
 
     <div id="videoptions"> <span>Media</span> 
 

 
     <video width="143" height="74" controls> 
 
      <source src="https://www.youtube.com/watch?v=_gTEpakcmDw" type="video/mp4">Your browser does not support the video tag.</video> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

完整代码给出here。为获得最佳效果,请全屏查看结果。 About Us,Account information,MarketBistip是完美的。然而media已被搞乱。我想要media类似于下面显示的屏幕截图:
img
我该怎么办?

+0

问题寻求帮助调试(“?为什么不是这个代码工作”)必须包括所期望的行为,一个特定的问题或错误,并在最短的代码要重现* *在问题本身**。 – Quentin

+0

呃...完整的代码在'jsfiddle',但是我会在代码中添加完整的代码 –

回答

1

也许是这样的:

#videoptions > span { 
     display:inline-block; 
     vertical-align: top; 
} 
#videoptions > video{ 
     display:inline-block; 
     vertical-align: top; 
} 
+0

不工作.... –

+1

是的,它可以工作,但是#videoptions太小。使100%的宽度和作品http://jsfiddle.net/x7eq1opf/2/ –