Question

在我的页脚中，我有面包屑列表，下面是一些文字。

我的问题是如何在面包屑列表和版权段落之间设置填充。

我使用<br>标记解决了这个问题，但我认为这在语义上并不正确。

我尝试使用padding-top但没有成功。

.col-xs-12 .breadcrumb{
    	background-color: #2b2b2b;
    }
    .breadcrumb > li + li:before {
      content: none;
    }
    .breadcrumb li a    {
        color: white;
        font-family: TW Cen MT;
    	font-size:17px;
    }
    .container-fluid  p{
    
      bottom: 0;
      position: absolute;
      margin-left: 34em;
    }

<div class="container-fluid footer">
        <div class="row">
            <div class="col-xs-12">
                
                <img src="img/Gallery/fb.png" alt=""> &nbsp
                <img src="img/Gallery/twitter.png" alt=""> &nbsp
                <img src="img/Gallery/youtube.png" alt=""> &nbsp
                <img src="img/Gallery/myspace.png" alt="">
    
                <ol class="breadcrumb">
                <li><a class="active">Home</a></li>  &nbsp
                <li><a href="#">Gallery</a></li>  &nbsp
                <li> <a href="#">FAQ</a></li>   &nbsp
                <li> <a href="#">Contact</a></li>
                </ol>
    
                <p><small>Copyright <span class="glyphicon glyphicon-copyright-mark"></span>  All Right Reserved | Testing Website </small></p>
            </div>
    </div>

Answer 1

将margin-bottom设置为有序列表，如下所示：

.breadcrumb {
    margin-bottom: 50px;
}

Answer 2

解决方案是添加边距底部：;到列表（.breadcrumb），请删除属性

.container-fluid  p{
    bottom: 0;
    position: absolute;
    margin-left: 34em;
}

你不再需要它们了。

Answer 3

你的段落是绝对定位的，不在流程中。

第一个解决方案 删除绝对定位。

第二个解决方案 在列表中添加填充底部。填充的大小对应于段落的高度和所需的边距。

像这样：

.breadcrumb {
    padding-bottom: 50px; // 20px height paragraph, 30px height margin
}

如何在段落和列表之间添加填充

3 个答案: