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

float を追加: 左; 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 に答える