发生了一些奇怪的事情...我使用display: inline-block
来显示内联元素。一切都好,直到添加一些新的元素。下面是一个例子:为什么这些项目不能在线显示?
CSS:
section#main{
width: 960px;
margin: 7% auto 0;
background: #000;
opacity: 0.86;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
div#video{
border: 1px solid red;
width: 640px;
height: 360px;
margin: 10px;
display: inline-block;
}
nav{
margin: 10px;
border: 1px solid yellow;
display: inline-block;
height: 360px;
width: 270px;
}
HTML:
<section id="main">
<div id="video"></div>
<nav>
<ul>
<li>Keliaujame ?... JAV: ?ikaga/Chicago S01E03</li>
</ul>
</nav>
<div id="comments"></div>
</section>
http://jsfiddle.net/nonamez/PfeP5/2/
出了什么问题?
+1为漂亮的插图。虽然小提琴会更有用;) – 2013-03-12 21:25:32
混合%边距与像素大小只会导致麻烦... – 2013-03-12 21:26:07
http://jsfiddle.net/PfeP5/ – 2013-03-12 21:26:18