Выравнивание двух разделов рядом друг с другом

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

Попробуйте удалить margin используется в nav-tabs или ul

Проверьте ниже фрагмент кода ..

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; 
}