在同一行上获取 2 个 div答案

【问题标题】：Getting 2 divs on the same line在同一行上获取 2 个 div
【发布时间】：2012-04-15 21:13:16
【问题描述】：

我正在尝试在同一行上获得 2 个 div，我有

<div class="header">
  <div class="clear hideSkiplink">
     <div class="menuDiv">
             <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
                EnableViewState="False" Orientation="Horizontal" 
                StaticSubMenuIndent="10px" BackColor="#E3EAEB"   DynamicHorizontalOffset="2" 
                Font-Names="Verdana" Font-Size="0.8em" ForeColor="#666666">
            </asp:Menu></div>

            <div class="SearchBox">

            </div>
        </div>
    </div>

我想在 hideSkiplink 中获取菜单和搜索，左侧是菜单，右侧是搜索。因为它是搜索在菜单下。我尝试更改在 css 上找到的所有内容的添加位置，但如果我在同一行中获取菜单并搜索，则 hideSkiplink 消失，如果我将搜索设置为向右浮动，它会退出 hideSkiplink。

我现在的 CSS 中只有

div.hideSkiplink
{
background-color:#555555;
width:100%;
 }

div.menu
{
padding: 8px 0px 8px 10px;   
}

有什么想法吗？

【问题讨论】：

标签： asp.net css html

【解决方案1】：

#NavigationMenu {
    float: left;
}

.SearchBox {
    float: right;
}

.MenuDiv {
    overflow: hidden; /* adjusts the height of .MenuDiv to wrap its children */
}

【讨论】：

【解决方案2】：

设置

display: inline-block;

然后根据需要设置它们的宽度（作为父容器的绝对值或百分比）

Live Demo

【讨论】：

谢谢。最后在上面的帖子中使用了 inline-block，所以我不需要包含任何宽度或高度。

【解决方案3】：

添加浮动：左；属性到 div.menu

【讨论】：

【解决方案4】：

你可以玩浮点数：

float: left;
float: right;
clear: both;

这并不总是容易做到的。

另一种选择是使用

display: inline-block;

或使用跨度。

【讨论】：

【解决方案5】：

line-height(child-elements) 结合前面的答案

【讨论】：