將兩個div彼此對齊

Question

好吧，這可能是我忽略了一些基本的東西，但我一直在努力讓這兩個div正確對齊。這就是它現在的樣子，最佳地，'好'會與標籤水平對齊，但我不能爲了我的愛而弄清楚爲什麼它像這樣漂浮在頂部。

這裏是我的CSS：

#wellnum { 
    float: left; 
} 

#wells { 

} 

#wellwrapper { 
    overflow: auto; 
} 

這裏是我的HTML：

<div id="wellwrapper"> 
    <div id="wellnum"> 
     <ul class="nav nav-tabs"> 
      <li class="active"> 
       <a href="#well">1</a> 
      </li> 
      @for (int i = 2; i < 13; i++) 
      { 
       <li> 
        <a href="#well">@i</a> 
       </li> 
      } 
     </ul> 
    </div> 
    <div id="wells">Well</div> 
</div> 

任何提示？

Answer 1

嘗試刪除nav-tabs或ul

檢查下面的代碼片段的使用margin ..

ul { 
 
    margin: 0; 
 
    margin-right: 10px; 
 
} 
 
ul li { 
 
    list-style: none; 
 
    display: inline; 
 
} 
 
#wellnum { 
 
    float: left; 
 
    clear: both; 
 
} 
 
#wellwrapper { 
 
    overflow: auto; 
 
}

<div id="wellwrapper"> 
 
    <div id="wellnum"> 
 
    <ul class="nav nav-tabs"> 
 
     <li class="active"> 
 
     <a href="#well">1</a> 
 
     </li> 
 
     <li> 
 
     <a href="#well">2</a> 
 
     </li> 
 
     <li> 
 
     <a href="#well">3</a> 
 
     </li> 
 
     <li> 
 
     <a href="#well">4</a> 
 
     </li> 
 
     <li> 
 
     <a href="#well">5</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div id="wells">Well</div> 
 
</div>

Answer 2

你應該嘗試這樣做行內的兩個部分 -

*{margin: 0;padding:0;} 
 
#wellnum { 
 
\t float: left; 
 
} 
 
#wellnum ul li{ 
 
float: left; 
 
list-style: none; 
 
} 
 

 
#wells { 
 
\t float: left; 
 
} 
 

 
#wellwrapper { 
 
    overflow: auto; 
 
}

<div id="wellwrapper"> 
 
    <div id="wellnum"> 
 
      <ul class="nav nav-tabs"> 
 
      <li class="active"> 
 
       <a href="#well">1</a> 
 
      </li> 
 
      @for (int i = 2; i < 13; i++) 
 
      { 
 
       <li> 
 
        <a href="#well">@i</a> 
 
       </li> 
 
      } 
 
     </ul> 
 
    </div> 
 
    <div id="wells">Well</div> 
 
    </div>

Answer 3

如果你希望你的項目horizantally對齊，只需使用

：

.nav li { 
    display: inline; 
} 

Answer 4

添加波紋管的CSS

#wells { 
    float: left; 
} 

http://jsfiddle.net/avgocvg8/2/

Answer 5

你可以試試這個：

#wellnum { 
    float: left; 
    clear: both; 
} 

DEMO

Answer 6

你可以試試浮阱以及使用父clearfix。

#wellnum { 
    float: left; 
} 

#wells { 
    float: left; 
} 

#wellwrapper { 
    overflow: auto; 
    zoom: 1; 
} 

#wellwrapper:before, 
#wellwrapper:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; } 

Answer 7

試試這個。

*{margin: 0;padding:0;} 
.clearFix { clear:both;} 
#box { 
    float: left; 
}