html - Twitter Bootstrap 的底部填充/边距问题

Question

因此，我正在借助 Twitter Bootstrap 快速构建网站主题 (Wordpress)，但遇到了问题。

我有一个标题放在一起，我在“向右拉”部分有这个奇怪的差距，不知道为什么:

我不确定交易是什么，我希望他们坐在与左侧文本相同高度的右边。

无论如何，我有以下相关的代码部分:

(标题部分的 HTML):

    <!-- Header -->
    <div class="row header-container">
      <div class="col-md-8 col-md-offset-2">
        <div class="pull-left">
          <h3>CharlesBaker.net</h3>
        </div>
        <div class="pull-right">
          <ul>
            <li><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
          </ul>
        </div>
      </div>
    </div>

(同一部分的 CSS):

.header-container {
    padding-top: 50px;
    background-color: #c0c0c0;
    border-bottom: 5px solid #880000;
}

.header-container h3 {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', serif;
}

.header-container ul {
    margin: 0;
    padding: 0;
}

.header-container ul li {
    display: inline;
    margin: 0;
    padding: 0;
}

.header-container a {
    padding: 3px;
    color: black;
}

.header-container a:hover {
    text-decoration: none;
    background-color: #880000;
    color: white;
}

不确定是什么问题，除非它与我正在使用标签而不是仅仅为 <span> 设置样式这一事实有关之类的，但由于我使用 CSS 删除了填充/边距，所以我认为这不是问题所在。

任何帮助都会很棒。这个想法是，当我将鼠标悬停在右侧的链接上时，它们会被包围在一个从 5 像素底部边框“延伸”出来的猩红色框中。

提前致谢!

Answer 1

你在找this吗？

您需要将 .header-container 设置为 display: inline-block 以对齐其中的所有元素。因此，您需要 float 您拉动的 div 元素( float 和左移)。最后一个变化，设置标题的宽度大小:我设置为 100%，但你可以设置任何你喜欢的 :)

CSS:

.header-container {
    padding-top: 50px;
    background-color: #c0c0c0;
    border-bottom: 5px solid #880000;
    width: 100%;
    display: inline-block;
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}