html - 奇怪的页脚样式

Question

我正在使用 this样式管理面板。当我制作一个大表格作为注册页面时，页脚看起来很奇怪。 Here is what it looks like. 我是 css 的初学者，所以我希望有人能帮助我如何使它看起来正确。页脚应该看起来像登录名，例如 here.我没有对标准 CSS 进行任何更改。这是我的代码:

<div class="login-overlay">
    <div class="logo">
        Log IP <br> <span class="smaller">test</span>
    </div>
    <div class="form-container shadow">
        <div class="icon">
            @yield('icon')
            <div class="header">
                @yield('name')
            </div>
        </div>
        <div class="inputs">
            @yield('login-content')                         
        </div>
    </div>
</div>
<footer class="mdl-mini-footer login-footer">
        <div class="mdl-mini-footer__left-section">
                <div class="mdl-logo">&copy;Material Dashboard Theme</div>
            </ul>
        </div>
        <div class="mdl-mini-footer__right-section">
                <div class="mdl-logo">Terms and Conditions Apply</div>
            </ul>
        </div>
</footer>

当我检查页脚时，它是这样写的:

.login-footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 30px;
background-color: white;
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.1);
}

它还说了更多 CSS，但我想这是最重要的部分。解决此问题的最佳方法是什么？

Answer 1

你的问题对我来说有点不清楚，如果你的问题只是你认为页脚太高，你应该试试 css max-width像这样的属性:

.footer {
  max-width:120px;
}

如果你想要一个粘在底部的页脚，你应该查看 Ryan Fait's CSS Sticky Footer .代码非常简单，它会强制页脚始终位于底部。

您将页脚包裹在 .wrapper 中并使用此 css 代码:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

不管你的问题是什么，你真的应该摆脱那些</ul> -一些人评论的元素。