2

我试图在同一行上获得 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;   
}

有什么想法我能做什么？

4

5 回答 5

3 
#NavigationMenu {
    float: left;
}

.SearchBox {
    float: right;
}

.MenuDiv {
    overflow: hidden; /* adjusts the height of .MenuDiv to wrap its children */
}
于 2012-04-15T21:16:30.513 回答
2

放

display: inline-block;

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

现场演示

于 2012-04-15T21:15:42.243 回答
0

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

于 2012-04-15T21:16:20.680 回答
0

你可以玩浮动：

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

这并不总是容易做到的。

另一种选择是使用

display: inline-block;

或使用跨度。

于 2012-04-15T21:16:32.467 回答
0

line-height(child-elements) 与先前答案的组合

于 2012-04-15T22:22:02.980 回答