Question

我想在同一条线上获得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。

我现在拥有的所有内容都是

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

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

任何想法我能做什么？

Answer 1

#NavigationMenu {
    float: left;
}

.SearchBox {
    float: right;
}

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

Answer 2

集

display: inline-block;

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

Live Demo

Answer 3

添加浮动：左;属性为div.menu

Answer 4

你可以玩浮动：

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

这并不容易。

另一种选择是使用

display: inline-block;

或使用跨度。

Answer 5

与之前答案相结合的行高（子元素）

在同一行上获得2个div

5 个答案: