html - 如何在同一行上对齐 span 和 div

Question

我有以下 HTML:

<div class="mega_parent">
<div class="parent">
<div class="holder">
    <span class="holder_under">Left heading</span>
    <div class="holder_options">
        <span class="holder_options_1">Option 1</span> 
        <span class="holder_options_2">Option 2</span> 
        <span class="holder_options_3">Option 3</span>
    </div>
</div>
</div>
</div>

和以下 CSS:

.holder {
    background-color: blue;
    padding: 10px;
}
.holder_under {
    padding-left: 10px;
    font-size: 16px;
    color: #999;
}
.parent {
    float: left;
    margin-right: 20px;
    width: 600px;
}
 .mega_parent {
background-color: blue;
    margin: 130px auto;
    min-height: 320px;
    height: 100% auto;
    overflow: auto;
    width: 940px;
    padding: 0px 10px;
}

问题:

如何使类 holder_options 的 div 与类 .holder_under 的跨度对齐在同一行？

这是当前在 jsFiddle 中的样子.

Answer 1

默认情况下，Div 是 block 级元素。请阅读更多关于 block level elements here. 的信息

"Block level elements - Their most significant characteristic is that they typically are formatted with a line break before and after the element (thereby creating a stand-alone block of content)."

设置为display:inline-block;

.holder_options {
  display:inline-block;
}

Working jsFiddle here.