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;
}

質問：

holder_optionsclass の div を classの span と同じ行に揃えるにはどうすればよい.holder_underですか?

jsFiddleで現在どのように見えるかを次に示します。

4

6 に答える 6

1

デフォルトdisplay:blockでは、div は幅の 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 を左にフロートするだけです:

.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 に答える