Question

所以，我正在利用Twitter引导程序快速构建一个网站主题（Wordpress），我遇到了一个问题。

我有一个标题扔在一起，我在“右拉”部分内部出现了这个奇怪的差距，不确定原因：

enter image description here

我不确定这笔交易是什么，我希望他们坐在与左边文字相同高度的线上。

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

（标题部分的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删除了填充/边距，我不会我认为这将是问题。

任何帮助都会很棒。我的想法是，当我将鼠标悬停在右边的链接上时，它们被封闭在一个猩红色的盒子里，从5px底部边框“延伸”。

提前致谢！

Answer 1

您在寻找this吗？

您需要将.header-container设置为display: inline-block以对齐其中的所有元素。因此，您需要浮动拉div元素（浮动和左侧）。只需最后一次更改，设置标题的宽度大小：我设置为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;
}

Answer 2

带有引导程序的h3标记有一个特定的行高属性。

h1, h2, h3 {
    line-height: 40px;//line 760
}

所以你必须添加样式来协商这个额外的高度。

还有另一套你的ul：

ul, ol {
    margin: 0 0 10px 25px; //line 812
}

解决方案：

覆盖ul边距如下：
```
.pull-right ul{
    margin: 0;
}
```
覆盖h3的行高，如下所示：
```
.pull-left h3{
    line-height:20px;
}
```

第一个是非常直接的，并给你正确的对齐straighaway。第二种解决方案需要您通过调整.pull-right的负边距来进行更多工作。

调试网址：http://jsbin.com/oToRixUp/1/edit?html,css,output

希望这有帮助。

使用Twitter Bootstrap进行底部填充/边距问题

2 个答案: