5

我有以下 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;
}

问题：

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

这是当前在jsFiddle中的样子。

4

6 回答 6

12

默认情况下，Div 是块级元素。请在此处阅读有关块级元素的更多信息。

“块级元素——它们最显着的特征是它们通常在元素之前和之后用换行符格式化（从而创建一个独立的内容块）。”

将其设置为display:inline-block;

.holder_options {
  display:inline-block;
}

在这里工作 jsFiddle。

于 2013-05-20T15:21:48.257 回答
1

默认情况下，divdisplay:block设置为 100% 的宽度。将其设置为display:inline或display:inline-block仅采用它需要的东西并允许其他人适应同一行

于 2013-05-20T15:19:01.307 回答
1

你需要内联块

这就是 display 属性的神奇值 inline-block 发挥作用的地方。基本上，这是一种使元素内联的方法，但保留了它们的块功能，例如设置宽度和高度、顶部和底部边距和填充等

css

.holder {
        background-color: blue;
        padding: 10px;
    }
    .holder_under {
        padding-left: 10px;
        font-size: 16px;
        color: #999;
    }
    .holder_options {
      display:inline-block;
    }

html

 <div class="holder">
      <span class="holder_under">Left heading</span>
          <div class="holder_options">
              <span class="holder_options_1">Option 1</span> </div>
于 2013-05-20T15:23:42.917 回答
0 
.holder_options
{
  float:right;
}

这是 JS Bin：http: //jsbin.com/idilim/1/

于 2013-05-20T15:22:51.707 回答
0

是的，您布置的结构做得不好，只是将 .holder_options 浮动到左侧：

.holder_options {
    float: left;
}
于 2013-05-20T15:23:51.607 回答
0

正如墨菲斯在评论中所说，style="display: inline;"应该这样做。

<div class="holder">
    <span class="holder_under">Left heading</span>
    <div class="holder_options" style="display: inline;">
        <span class="holder_options_1">Option 1</span> 
    </div>
</div>
于 2013-05-20T15:25:46.403 回答