1

こんにちは、この問題があります。ヘッダーに 2 つのセクションがありますが、ドロップダウンを nav-section に配置しないと、次のようにヘッダーがクラッシュします。

絶対位置を使用すると、ドロップダウンが div から移動し、モニターごとに異なって見えます。

うまく説明できないかもしれないので、私が欲しいものを写真で示します: そして以下のナビゲーションセクション。

ここに私のHTMLがあります：

<div class="container">

<div class="navbar ">


 <div class="container">

    <div class="top">
        <div class="img">
          <a href="#" id="facebook" title="facebook"></a>

          <a href="#" id="linkedin" title="linkedin"></a>

          <a href="#" id="youtube" title="youtube"></a>
        </div>


          <ul class="nav nav-pills">
      <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">med@mail.com
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" style="display: none; ">
                <li><a href="/users/edit.6">My Account</a></li>

                <li><a href="/users/edit.6">Settings</a></li>

                <li><a href="/users/edit.6">Analytics</a></li>

                <li><a href="/users/sign_out" data-method="delete" rel="nofollow">Sign out</a></li>
              </ul>
            </li>   
          </ul>
        </div>
    </div>
    <div class="white_line"></div>
    <div class="grey_line"></div>              
   <ul class="nav pull-left">
      <li><a href="/">Home</a></li>
      <li><a href="/what_we_do">What we do</a></li>
      <li><a href="#">My account</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>

そして私のCSS：

   .navbar .nav {
background-color: #f2f2f2;
float: left;
}

      .navbar .nav > li {
  padding-top: 0px;
   }

.navbar-inner{
padding:0px;
width:960px;
}

.navbar .nav > li > a{
 padding: 28px 25px 10px 0px;
}

 .navbar .nav-pills > li > a{
 padding-top:22px;
 }
 //top - top class with icons

.top{
height: 35px;
background: #c7dbaa;
}
.top .img:first-child{
 margin-bottom:1px;
 }
 .top .img{
 display:inline-block;
 padding: 5px 0 0 5px;
 }
.nav-pills{
 //here I need to change positioning or something like that
 }
4

1 に答える 1

2 
<div class="top row">
        <div class="img">
          <a href="#" id="facebook" title="facebook"></a>

          <a href="#" id="linkedin" title="linkedin"></a>

          <a href="#" id="youtube" title="youtube"></a>
        </div>

class="top row" に行を追加して、メニューがナビゲーションに表示されるようにする必要があることを確認してください。次に、色とすべてのものを削除する必要があります

于 2012-08-30T07:56:45.867 に答える