并排显示两个div

Question

考虑这个小提琴：http://jsfiddle.net/nashabhu/WbJvP/。我想展示以下div 彼此相邻。

<!--Sidebar--->
    <div class="schoolnav" style="margin-left: 20px; margin-top: 12px;">
        <ul>
            <li>General Information</li>
            <li>Features</li>
            <li>School Images</li>
            <li>Contact Information</li>
        </ul>
    </div>
   <!-- End Sidebar -->
    <!-- Container -->
    <div id="container">
      </div>

我现在已经如下图所示：

我想在General Information的同一行显示Add School。我怎么能这样做？

修改：

我只想在一般信息文本的同一行中添加新校区。我怎样才能做到这一点？ Daniel Imms的回答是有效的，但需要schoolnav中的container。所以侧边栏是在内容而不是在左侧。

Answer 1

以下是执行此操作的方法之一，我们将使用.schoolnav从页面流中取出position:absolute;，然后将#main margin-left等于width {1}}的{​​1}}。

jsFiddle

<强> CSS

.schoolnav

<强> HTML

我已将#shell { position:relative; } .schoolnav { position:absolute; width:200px; } #main { width:788px; margin-left:200px; } 移至.schoolnav

#shell

替代方法

执行此类操作的另一种常用方法是在两个项目上使用<div id="container"> <div class="shell"> <!--Sidebar---> <div class="schoolnav" style="margin-left: 20px; margin-top: 12px;"> ... 并将其宽度设置为百分比，以便它们在页面上方。但是这个方法的问题是你需要在末尾另外添加float:left;来清除浮点数（或伪元素clearfix）。

Answer 2

将float:left应用于两个div代码并设置每个width，使总数为100%

E.g。

.schoolnav {
  float:left;
  width:20%;
}

#container {
  float:left;
  width:80%;
}

Answer 3

选择以下其中一项......

使用浮动：

.container {
    overflow: hidden;
}
.container div {
    float: left;
}

使用内联块：

.container div {
    display: inline-block;
}

Answer 4

试试这个：

.schoolNav{
    float:left;
    display: inline-block;
}

#container{
     margin-left:150px;  /* increase this value if you want to */
     /* remove padding: 20px 0  */
}

Answer 5

请试试这个：

添加以下CSS

.schoolnav { float:left }
#container {
     margin-left:165px;
     padding:0px !important;
}

Answer 6

这将解决您的问题：

1-将这些行添加到CSS：

.schoolnav {display: inline-block;}
#container { padding:20px 0;display: inline-block;}

2-在您的HTML中，重命名或删除包含类div的第二个 shell。它占用了所有可用的宽度，并且不适合与.schoolnav DIV一行。 CSS为它定义了988px的宽度，并且它首次用于HEADER部分，这里使用另一个具有适当宽度的类。这一个：

.
.
.
<div id="container">
 <div class="shell"> <!-- rename the class and use another width for it in your CSS -->
.
.
.

你的问题应该解决。

Answer 7

我在你的jsfiddle的css中尝试了这个，发现它按照你的预期工作：

.schoolnav{float:left; margin-right:20px;}
#container { padding:0; overflow:hidden;}

看看是否适合你。

Answer 8

尝试：

<div></div> &nbsp; <div></div>