3

ヘッダーを次のようにしたい：

Link | Link | Link                                               Image
-----------------------------------------------------------------------

私が代わりに持っているのは：

Link | Link | Link                                               
-----------------------------------------------------------------------    
                                                                 Image

ASP コード:

<div class="hideSkiplink">
     <asp:Menu ID="NavigationMenu" runat="server" EnableViewState="False" IncludeStyleBlock="true" Orientation="Horizontal" >
          <Items>
               <asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/ICONS/About/home_Icon.png"/>
               <asp:MenuItem NavigateUrl="~/About.aspx" ImageUrl="~/ICONS/About/about_Icon.png"/>
               <asp:MenuItem NavigateUrl="~/RestrictedPages/AdminMenu.aspx" ImageUrl="~/ICONS/About/admin_Icon.png"></asp:MenuItem>
          </Items>
     </asp:Menu>
     <div class="logo">
          <asp:Image ID="Image1" runat="server" ImageUrl="~/ICONS/About/logo.png" />
     </div>
</div>

CSS:

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

div.logo {
   float: right;
}

Firebugショーの要素を調べる：

<div class="hideSkiplink">
  <a href="#NavigationMenu_SkipLink">
    <div id="NavigationMenu" style="float: left;">
      <div style="clear: left;"></div>

のdivが自動的に作成されていると思いますがclear: left、それが問題の原因です。

この要素が作成されないようにするにはどうすればよいですか? または、要素が含まれていることを補うための回避策はありますか?

4

4 に答える 4

2

div を適切に配置する

例えば

<div id="dvParent">
    <div style="float:left">
        Link | Link | Link 
    </div>
    <div style="float:right">
        Image
    </div>
    <div style="clear:both;"></div>
</div>

http://jsfiddle.net/PhKhg/

于 2013-05-10T12:21:02.503 に答える
1

私はこの質問が非常に古いことを知っています...しかし、私はちょうど同じ問題を抱えていて、私にとっては、次の解決策がうまくいきました:

#IDOfYourMenuControl + div {
    clear: none !important;
}
于 2016-01-25T16:18:07.467 に答える