在同一水平线上对齐两个 div 不起作用[重复]答案

【问题标题】：align two divs in same horizontal line not working [duplicate]在同一水平线上对齐两个 div 不起作用[重复]
【发布时间】：2017-01-25 12:26:55
【问题描述】：

我正在尝试将两个 div 对齐在相同的水平位置。一个 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>

图片附上::

【问题讨论】：

你能用一些不同的方法吗？

标签： html css asp.net css-float

【解决方案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" />

【讨论】：

【解决方案2】：

如果所有元素都在一行中，那么您可以对元素使用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>

【讨论】：

给 div 指定高度不利于响应速度？？？
并非如此，如果您的内部内容具有固定内容，那么提供固定高度不会妨碍您的响应能力。如果需要您的小高度，您可以在媒体查询中更改高度。

【解决方案3】：

你需要添加样式：

display: inline-block;

到父 div。

【讨论】：

【解决方案4】：

移除额外的周围 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>

【讨论】：

【解决方案5】：

你可以使用 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。

【讨论】：

【解决方案6】：

使用

float:left;

对于两个 div。

【讨论】：

【解决方案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>

【讨论】：