将两个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; 
}