1

考虑一下这个小提琴：http: //jsfiddle.net/nashabhu/WbJvP/。我想将以下divs 并排显示。

<!--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所以侧边栏出现在本体而不是左侧。

4

8 回答 8

1

这是一种方法，我们将.schoolnav取出页面的流使用position:absolute;，然后给出#main一个margin-left等于width的.schoolnav。

jsFiddle

在此处输入图像描述

CSS

#shell {
    position:relative;
}
.schoolnav {
    position:absolute;
    width:200px;
}    
#main {
    width:788px;
    margin-left:200px;
}

HTML

我搬进.schoolnav了#shell

<div id="container">
    <div class="shell">
        <!--Sidebar--->
        <div class="schoolnav" style="margin-left: 20px; margin-top: 12px;">
        ...

替代方法

做这种事情的另一种常用方法是float:left;在这两个项目上使用并将它们的宽度设置为百分比，这样它们就会在页面上显示。但是，这种方法的问题是您需要div在末尾添加一个额外的内容来清除浮动（或伪元素 clearfix）。

于 2013-03-30T06:21:28.973 回答
0

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

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

看看是否适合你。

于 2013-03-30T08:16:51.557 回答
0

应用于float:left两个div标签并设置width每个标签，因此总数为100%

例如

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

#container {
  float:left;
  width:80%;
}
于 2013-03-30T06:21:34.020 回答
0

选择以下之一...

使用浮点数：

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

使用内联块：

.container div {
    display: inline-block;
}
于 2013-03-30T06:22:14.723 回答
0

尝试这个：

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

#container{
     margin-left:150px;  /* increase this value if you want to */
     /* remove padding: 20px 0  */
}
于 2013-03-30T06:24:05.520 回答
0

请试试这个：

添加以下CSS

.schoolnav { float:left }
#container {
     margin-left:165px;
     padding:0px !important;
}
于 2013-03-30T06:24:09.297 回答
0

这将解决您的问题：

1-将这些行添加到您的 CSS 中：

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

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

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

你的问题应该得到解决。

于 2013-03-30T06:42:40.013 回答
-2

尝试 ：

<div></div> &nbsp; <div></div>
于 2013-03-30T06:24:46.127 回答