视频元素在html中并不完美

时间:2015-08-03 11:40:04

标签: html css twitter-bootstrap-3

我在html写了一段简短的视频代码,如下所示:
code:

#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 UsAccount informationMarketBistip是完美的。但是media已经搞砸了。我希望media类似于下面显示的屏幕截图:
img
我该怎么办?

1 个答案:

答案 0 :(得分:1)

也许是这样的:

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