同じ水平線で2つのdivを整列させない

Question

2つのdivを同じ水平位置に整列しようとしています。 1つのdivは左に浮動し、もう1つは右に浮動します。私も別のdivの中に2つのdivを保存しましたが、それでも同じ水平位置に揃えることはできません。

#tray { 
 
    padding: 20px 15px; 
 
    background-color: #36648B; 
 
    color: #FFFFFF; 
 
} 
 
.f-left { 
 
    /*float: left !important;*/ 
 
    font-size: 25px; 
 
    width: 400px; 
 
} 
 
.f-right { 
 
    float: right !important; 
 
    width: 200px; 
 
} 
 
.f-left a { 
 
    color: white; 
 
}

<div id="tray"> 
 
    <div> 
 
    <div class="f-left">Business Intelligence, CIMB</div> 
 
    <div class="f-right"> 
 
     <asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
     <a href="WebLogin.aspx" runat="server" id="logout" onclick="web_logout">Log Out</a> 
 
    </div> 
 
    </div> 
 
</div>

添付画像::

Answer 1

ノーブレークスペースを

.f-left { 
    display: inline-block; 
} 

.f-right a { 
    display: block; 
    text-align: center; 
    padding: 3%; 
    color: #fff; 
} 

追加および削除

<asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

〜

<asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" /> 

Answer 2

すべての要素がここに一行にある場合は、要素のためline-height修正プログラムを使用することができます。親要素に固定された高さを与え、すべての子要素の行の高さと同じにします。親のdivに

display: inline-block; 

：あなたはスタイルを追加する必要があります

#tray { 
 
    padding: 20px 15px; 
 
    background-color: #36648B; 
 
    color: #FFFFFF; 
 
} 
 
.f-parent { 
 
    height: 30px; 
 
} 
 
.f-left { 
 
    display: inline-block; 
 
    font-size: 25px; 
 
    line-height: 30px; 
 
} 
 
.f-right { 
 
    float: right !important; 
 
    /* width: 200px; */ /* Uncomment this to give a fixed width */ 
 
    line-height: 30px; 
 
} 
 
.f-left a { 
 
    color: white; 
 
}

<div id="tray"> 
 
    <div class="f-parent"> 
 
    <div class="f-left">Business Intelligence, CIMB</div> 
 
    <div class="f-right"> 
 
     <asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
     <a href="WebLogin.aspx" runat="server" id="logout" onclick="web_logout">Log Out</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

：

はコードを参照してください。

Answer 4

あなたはフレキシボックスを使用することができます：フレックス、ALIGN-：

<div id="tray"> 
     <div class="f-left">Business Intelligence, CIMB</div> 
     <div class="f-right"> 
      <asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <a href="WebLogin.aspx" runat="server" id="logout" onclick="web_logout">Log Out</a> 
     </div> 

</div> 

私はあなたのHTML内の余分なdiv要素を削除し、追加したディスプレイ

#tray { 
    display: flex; 
    align-items: baseline; 
    justify-content: space-between; 
    padding: 20px 15px; 
    background-color: #36648B; 
    color: #FFFFFF; 
} 

.f-left { 
    font-size: 25px; 
    width: 400px; 
} 

.f-right { 
    width: 200px; 
} 

.f-left a { 
    color: white; 
} 

CSS

HTML items：ベースラインとjustify-content：space-between。

Answer 5

は、追加の周囲のDIVを取り外し、トレイクラスにdivの両方について

display: inline-flex; 
align-items: center; 

#tray { 
 
    padding: 20px 15px; 
 
    background-color: #36648B; 
 
    color: #FFFFFF; 
 
    display: inline-flex; 
 
    align-items: center; 
 
} 
 
.f-left { 
 
    /*float: left !important;*/ 
 
    font-size: 25px; 
 
    width: 400px; 
 
} 
 
.f-right { 
 
    width: 200px; 
 
    
 
} 
 
.f-left a { 
 
    color: white; 
 
}

<div id="tray"> 
 
    <div class="f-left">Business Intelligence, CIMB</div> 
 
    <div class="f-right"> 
 
     <asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
     <a href="WebLogin.aspx" runat="server" id="logout" onclick="web_logout">Log Out</a> 
 
    </div> 
 
</div>

Answer 6

使用

float:left; 

をこれらのプロパティを追加します。

Answer 7

これを試してください...

<style> 
    body { 
     padding: 0; 
     margin: 0; 
    } 

    #tray { 
     padding: 20px 15px; 
     background-color: #36648B; 
     color: #FFFFFF; 
    } 

    .f-left { 
     float: left !important; 
     font-size: 25px; 
     width: 400px; 
    } 

    .f-right { 
     float: right !important; 
     width: 200px; 
    } 

    .f-left a { 
     color: white; 
    } 

    .clearfix { 
     clear: both; 
    } 
</style> 

HTML

あなたのCSSの

<div id="tray"> 
    <div> 
     <div class="f-left">Business Intelligence, CIMB</div> 
     <div class="f-right"> 
      <asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <a href="WebLogin.aspx" runat="server" id="logout" onclick="web_logout">Log Out</a> 
     </div> 
     <div class="clearfix"></div> 
    </div> 
</div>