时间戳

首页 > 解决方案 > 无法分离项目无序列表和按钮

html - 无法分离项目无序列表和按钮

问题描述

我不知道如何描述这个问题。我正在使用三个样式框架 Bootstrap、Semantic 和 Materialize CSS。我创建了一个无序列表，之后有一个按钮，当我使用br标签将它们分开时，分离工作但间隙没有填充主体背景颜色，所以我使用了边距，但仍然没有填充主体颜色.

你可以在这个中看到这个问题图片链接

HTML 代码

<section>
        <div class="container dashboard ">
            <div class="row">
                <aside class="col-sm-3">
                    <ul class="list-group text-center">
                        <a class="list-group-item active" href="#">Dashboard</a>
                        <a class="list-group-item" href="#">All Posts</a>
                        <a class="list-group-item" href="#">Create/Edit Posts</a>
                    </ul>
                    <a class="btn btn-light btn-block" href="#"> <i class="fa fa-power-off"></i> <span class="text">Log out</span> </a>
                </aside>
            </div>
        </div>
    </section>

CSS

.dashboard{
    margin-top: 100px;
    margin-bottom: 100px;
    padding: 30px 0px;
}

.dashboard .col-sm-3{
    border-bottom: none;
    border-radius: 5px;
    height: fit-content;
    padding-left: 0;
    padding-right: 0;
    background: #fff;
}

.dashboard .col-sm-3 ul a{
    text-decoration: none;
    font-weight: 500;
}

.dashboard .col-sm-3 .btn {
    margin-top: 50px;
}

.btn-light {
    background-color: #fff;
    border-color: #e4e4e4;
    text-align: center;
}

.btn-light span{
    text-transform: none;
    font-weight: 500;

}

标签： htmlcsstwitter-bootstrap

解决方案

你可以检查这个问题这个东西会帮助你链接

实际上，这个问题对我也有帮助，我也遇到过类似的情况。

我会让这个更简单我认为这个工作你可以试试这个

br {
    content: "A" !important;
    background: #fafafa !important;
    display: block !important;
    width: 100% !important;
    height: 30px !important;
}

推荐阅读