Question

我有一些神秘的白色空间，我不知道如何摆脱。我有一个垂直列表，我希望它紧挨着带有文本的段落。这是我的HTML和CSS

由jmgem解决我还要调整我的部分元素的大小，因为它适合于NAV BAR

HTML

<div id="classOfferingList" class="classOfferingList" align="left">
    <ul>
        <li>
            <a href="" >General U.S. K-12 English Speaking Course</a>
        </li>
        <li>
            <a href="" >University Preperation Course</a>
        </li>
        <li>
            <a href="" >SAT Preperation Course</a>
        </li>
        <li>
            <a href="" >GRE Preperation Course</a>
        </li>
    </ul>
</div>
<div id="classOfferingInfo" >
    <p>example text</p>
</div>

CSS

.classOfferingList ul {
  list-style-type: none;
  float: left;
}

.classOfferingList ul li {
  margin: 5px 0px;
}

.classOfferingList ul li a {
  list-style:  none;
  margin: 1px 0px;
  display: inline-block;
  background-color: blue;
  width: 35%;
  text-align: center;
}

Answer 1

首先，我将您的代码复制到jsfiddle中。继续看看。

http://jsfiddle.net/GyuX5/

如果我理解你的问题，你想把段落放在垂直菜单旁边。所以这是你调整后的CSS

.classOfferingList ul {
  list-style-type: none;
  float: left;
}

.classOfferingList ul li {
   margin: 5px 0px;
}

.classOfferingList ul li a {
  list-style:  none;
  margin: 0px;
  display: inline-block;
  background-color: grey;
  text-align: center;
  width: 150px;
}

#classOfferingInfo {
    display: inline-block;
}

我将段落显示为内联块，然后我将li a的宽度更改为150px而不是35％。瞧。

选择不使用左浮动，因为它们会变得更复杂，从而破坏布局。试着将html / css想象为从左到右填充浏览器中的一行的块。

Answer 2

尝试将两个主要div放到左侧，然后它们将彼此相邻。 See Fiddle

.classOfferingList {
    float: left;
}
.classOfferingList ul {
  list-style-type: none;
  float: left;
}

.classOfferingList ul li {
  margin: 5px 0px;
}
#classOfferingInfo {
    float: left;
}
.classOfferingList ul li a {
  list-style:  none;
  margin: 1px 0px;
  display: inline-block;
  background-color: blue;
  width: 35%;
  text-align: center;
  color: #fff;
}

Answer 3

http://jsfiddle.net/erenyener/TC856/

#classOfferingList > ul
{
    padding:0px;
}

你需要重置ul元素

或您的问题可能就是这个

FIDDLE

垂直导航栏和段落之间的空白区域

3 个答案: