html - 为什么元素不显示内联？

<分区>

发生了一些奇怪的事情...我正在使用 display: inline-block 来显示内联元素。一切正常，直到 add 在其中添加了一些新元素。这是一个例子:

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/

有什么问题吗？

最佳答案

那是垂直对齐的问题，把两个元素垂直对齐都设置到顶部就可以了

div#video{
    vertical-align:top;
}

nav{
    vertical-align:top;
}

http://jsfiddle.net/xHNJm/

关于html - 为什么元素不显示内联？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15372431/

上一篇：html - 如何停止我的 :after content from blocking my anchor?

下一篇：css - 什么是 CSS 中的规则以及 "at"用于什么

相关文章：

html - 无法取消 IE 8 中 <select> 上的填充

html - .page background-color 在 CSS 中不会改变

html - 需要垂直文本从底部开始与横幅的左侧对齐

css - Bootstrap 的奇怪行为

javascript - ComboBox 隐藏和显示 div

javascript - 硬编码文件路径而不是手动输入文件

javascript - 一次更改多个 div 的属性

javascript - 如何从 php 到 jquery 获取数组中的数据

javascript - 为什么当textarea没有填充时，不改变样式？

css - Html <div> 元素背景图像不显示，div 内也没有任何内容