Question

我的预设项目中有一个页脚并且工作正常，如下图所示：

我想在其他项目中使用它，但它无法正常工作：

我不知道为什么？！网站.css

body {
padding-top: 0px;
padding-bottom: 0px;
width:100%;
 height:100%
}

.body-content {
padding-left: 0px;
padding-right: 0px;
}
input,
select,
textarea {
max-width: 280px;
}

.field-validation-error {
color: #b94a48;
}

.field-validation-valid {
display: none;
}

input.input-validation-error {
border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
border: 0 none;
}

.validation-summary-errors {
color: #b94a48;
 }

.validation-summary-valid {
display: none;
}

layout.cshtml：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@RenderSection("styles", false)
</head>
<body style="width:100% !important;padding:0px;">
@*overflow-x:hidden;*@


@RenderBody()

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", false) 
</body>
</html>
<br />
<footer style="background-color:#191919; text-align:center;color:GrayText;">
<div>
    <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold;" class="list-group-item">text1</li>
        <li class="list-group-item"><a class="Alist" href="">text2</a></li>
        <li class="list-group-item"><a class="Alist" href="">text3</a></li>
        <li class="list-group-item"><a class="Alist" href="">text4</a></li>

    </ul>
    <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold;" class="list-group-item">manu</li>
        <li class="list-group-item"><a class="Alist" href="">text5</a></li>
        <li class="list-group-item"><a class="Alist" href="">text6</a></li>
        <li class="list-group-item"><a class="Alist" href="">text7</a></li>

    </ul>
    <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold;" class="list-group-item">text8</li>
        <li class="list-group-item">text9</li>
        <li class="list-group-item">text10</li>
        <li class="list-group-item">text11</li>
        <li class="list-group-item">tel</li>
    </ul>
    <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold; padding-bottom:10px;" class="list-group-item">follow us</li>

        <li class="list-group-item">
            <a href=""><img src="~/Images/MenuImages/facebook.png" /></a>
            &nbsp;
            <a href=""><img src="~/Images/MenuImages/twitter.png" /></a>
            &nbsp;
            <a href=""><img src="~/Images/MenuImages/youtube.png" /></a>
            &nbsp;
            <a href=""><img src="~/Images/MenuImages/instagram.png" /></a>
        </li>

    </ul>
</div>
<div>
    <hr style="width: 70%; background-color: #5d5d5d; height: 0.5px; border: 0 none; " />
</div>
<div style="text-align:center;">
    <span style="text-align:center;"> all rights reserved</span>
    <span style="text-align:center;">&copy;</span>

</div>

我在页面标题中有一个全屏引导旋转木马，在身体中有一些图片。谢谢你的帮助。

我将 clear：both 添加到我的页脚样式中它看起来更好但是它仍然不是我想要的主页脚

它在http://jsfiddle.net/53pdf4jb/中工作正常，但我不知道为什么在我的项目中......

Answer 1

根据上面的讨论，这里是您的问题的解决方案。应用clear:both将您的页脚内容放入单独的行，然后将背景颜色应用于列表项以删除白色背景。

 footer{clear:both;}
 footer ul li{background-color:#191919;}

页脚无法正常工作并打破所有CSS

我在页面标题中有一个全屏引导旋转木马，在身体中有一些图片。谢谢你的帮助。

1 个答案: