在同一水平线上对齐两个 div 不起作用

Question

我正在尝试将两个 div 对齐到同一水平位置。一个div向左浮动，一个向右浮动。我也将两个 div 保存在另一个 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

如果此处所有元素都在一行中，则可以对元素使用 line-height 修复。给父元素一个固定的高度，并使其等于所有子元素的line-height。

参考代码：

#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 2

您需要添加样式：

display: inline-block;

致家长div。

Answer 3

你可以使用 FlexBox：

HTML

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

CSS

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

我在你的 HTML 中删除了多余的 div 并添加了 display: flex, align-items: baseline 和 justify-content: space-between.

Answer 4

删除额外的周围 div 并在托盘上添加这些属性 class

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 5

使用

float:left;

对于 div。

Answer 6

请试试这个...

<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

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

Answer 7

在你的 css

添加

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

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

并删除不间断 space

<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" />

在同一水平线上对齐两个 div 不起作用

align two divs in same horizontal line not working

html

css

asp.net

css-float