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 level elements here.

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

将其设为display:inline-block;

.holder_options {
  display:inline-block;
}

Working jsFiddle here.

Answer 2

默认情况下div为display:block，设置为占宽度的100％。将其设置为display:inline或display:inline-block以仅采取所需内容并允许其他人适合同一行

Answer 3

你需要内联阻止

这是显示属性的魔术值内联块发挥作用的地方。基本上，它是一种使元素内联，但保留其块功能的方法，如设置宽度和高度，顶部和底部边距和填充等

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>

Answer 4

.holder_options
{
  float:right;
}

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

Answer 5

是的，你布置的结构不是很好，但只是向左浮动.holder_options：

.holder_options {
    float: left;
}

Answer 6

正如Morpheus在评论中所说，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>

如何在同一行上对齐跨度和div

6 个答案: