我在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 Us
,Account information
,Market
和Bistip
是完美的。但是media
已经搞砸了。我希望media
类似于下面显示的屏幕截图:
我该怎么办?
答案 0 :(得分:1)
也许是这样的:
#videoptions > span {
display:inline-block;
vertical-align: top;
}
#videoptions > video{
display:inline-block;
vertical-align: top;
}