Question

我正在尝试将两个div对齐在同一水平位置。一个div是向左浮动而另一个是向右浮动。我还将两个div保留在另一个div内，但它们仍然无法对齐同一个水平位置。

＆＃13;

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

＆＃13;

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

＆＃13;

附加图片::

Answer 1

在你的CSS中

添加

.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修复。为父元素指定一个固定的高度，使其等于所有子元素的行高。

参考代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您需要添加样式：

display: inline-block;

到父div。

Answer 4

您可以使用FlexBox：

<强> HTML

#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

OSError

我删除了HTML中的额外div并添加了display：flex，align-items：baseline和justify-content：space-between。

Answer 5

删除附加的周围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;

两个div。

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

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

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

7 个答案: