2013-03-12 54 views
4

发生了一些奇怪的事情...我使用display: inline-block来显示内联元素。一切都好,直到添加一些新的元素。下面是一个例子:为什么这些项目不能在线显示?

god bad

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/

出了什么问题?

+0

+1为漂亮的插图。虽然小提琴会更有用;) – 2013-03-12 21:25:32

+0

混合%边距与像素大小只会导致麻烦... – 2013-03-12 21:26:07

+3

http://jsfiddle.net/PfeP5/ – 2013-03-12 21:26:18

回答

4

这是一个垂直对齐问题,只需设置两个元素垂直对齐顶部

div#video{ 
    vertical-align:top; 
} 

nav{ 
    vertical-align:top; 
} 

http://jsfiddle.net/xHNJm/

+0

哦,是啊,我怎么可以忘掉这件事...上周我也有同样的事 – user1692333 2013-03-12 21:30:32

+0

@musa - 那也很好 – 2013-03-12 21:31:04

1

来自

删除display: inline-block;添加float: left;

下面添加一个<div style="clear: both"></div><div id="comments">

为证明这一小提琴:http://jsfiddle.net/9BsS3/

0

就个人而言,我总是尽量避免使用仅仅是因为举步维艰的行为跨浏览器的inline-block的。

我会使用下面的CSS(除去显示:内联块;以及使用float:留在它的位置(确保父元素也被浮动,以确保儿童的清除浮动元素):

section#main{ 
    width: 960px; 
    margin: 7% auto 0; 
    float:left; 
    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; 
    float:left; 
} 

nav{ 
    margin: 10px; 
    border: 1px solid yellow; 
    float:left; 
    height: 360px; 
    width: 270px; 
} 
nav ul { 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
nav li { 
    color:#fff; 
} 
相关问题