垂直导航栏和段落之间的空白答案

【问题标题】：White Space between vertical nav bar and paragraph垂直导航栏和段落之间的空白
【发布时间】：2016-10-20 23:10:03
【问题描述】：

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

由 jmgem 解决，我还必须重新调整段落元素的大小，使其适合导航栏旁边

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

【问题讨论】：

这很可能是inline-block 元素造成的。见this answer
@JoshCrozier 感谢您的回答，但这并没有改变任何事情。
这是你要找的东西吗jsfiddle.net/32q6y *改变了你的文字颜色，因为我看不到它：p
@user3010773 这更接近我想要的。问题是我希望文本与导航栏一起放置。就像在书中他们有一个大字母和周围的其余文字一样。

标签： css html whitespace removing-whitespace

【解决方案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 的宽度更改为 150 像素而不是 35%。瞧。

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

【讨论】：

嘿，谢谢这几乎解决了我需要的问题。我还必须调整段落大小（小家伙决定走到我的导航栏下方）。感谢您的帮助！

【解决方案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;
}

【讨论】：

【解决方案3】：

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

#classOfferingList > ul
{
    padding:0px;
}

你需要重置 ul 元素

或者你的问题可能是这样的

FIDDLE

【讨论】：