html - 3つのアイテムを1つずつ並べるCSS

Question

以下の 3 つの要素を垂直方向ではなく水平方向に配置する必要があります...現在のファイルは次のとおりです...どうすればよいですか?

HTML:

    <div id="banner">
        <div class="IE-banner">
            <div id="go-lang">
                <p> This will contain google language </p>
            </div>
            <div id="go-search">
                <p> This will contain google search </p>
            </div>
            <div id="go-search">
                <p> This will contain facebook links </p>
            </div>
        </div>
    </div>

CSS:

#banner{ 
 width:900px; 
 height:75px; 
 background-color:Red; 
 color:White; 
 font-size:10px; 
 font-weight:bold; 
 position:relative; 
}

div.IE-banner{
    position:absolute;
    vertical-align:middle;
    top:20px;
    right:10px;
    font-size:medium;
}

Answer 1

これを行うには、要素の表示プロパティを変更します。これにより、コード内の過度のdivを回避することもできます。

<ul class="banner">
    <li>Google lang</li>
    <li>Google search</li>
    <li>Facebook</li>
</ul>

CSSルールの場合：

ul.banner       { display: block; }
ul.banner > li  { display: inline-block; }

または、フロート方式を使用します。

ul.banner       { display: block; overflow: auto; }
ul.banner > li  { float: left; }

さまざまなメディアに適したHTMLコンテンツできれいになります。

Answer 2

必要なアイテムを一列に並べます。display:inline-block

.IE-banner div {
    display: inline-block;
}

---

ただし、より整理するために、インラインで必要なすべての要素にクラスを追加します。そして、そのクラスのみを変更します。

<div id="banner">
    <div class="IE-banner">
        <div id="go-lang" class="inline">
            <p> This will contain google language </p>
        </div>
        <div id="go-search" class="inline">
            <p> This will contain google search </p>
        </div>
        <div id="go-search" class="inline">
            <p> This will contain facebook links </p>
        </div>
    </div>
</div>

CSS:

.inline {
    display:inline-block;
}

Answer 3

ここでは、マークアップのデザインに合わせるための 2 つの代替案を示します。

詳細はあなたの意志で管理してください。

マークアップで ID が重複しないように、ID の 1 つを変更しました ( 「go-face」という名前の新しい ID )

<div id="go-face" class= "goDiv">
                <p> This will contain facebook links </p>
  </div>

テキストを垂直方向に中央揃えし、余分なコードを削除するために、IE バナー ルールを修正しました

div.IE-banner{
   text-align:center;
   line-height:75px;   
   font-size:medium;
}

IE-banner にネストされたすべての div で共有されるクラスに「goDiv」という名前を付け、このクラスを対象とするルールを追加しました。これは、div をフロートさせ、使用可能な幅の 3 分の 1 を設定します。

.goDiv {
    width:33.33%;
    float:left;
}

例はこのフィドルで見ることができます

代替 ネストされた div にクラスを追加したくない場合は、次のようにセレクターを変更することもできます。

.IE-banner div{
   width:33.33%;
    float:left; 

}

Answer 4

<style>
.IE-banner
{
float:right;
background-color:red;
}
</style>