我正在尝试创建一个具有页脚菜单的网站。我在内容中使用container
,因为我不知道如何使其居中。当我尝试应用页脚菜单而不使用container
时。页脚的background-color
向上扩展,最后一个div
没有容器。而且文字不会居中。
当我使用.mainbar:float:left;
和.sidebar:float:right;
时会变成这样
HTML
<div class="container" id="content">
<div class="mainbar">
<img src="img/img2.png"><br>
<h4>Sample text.</h4>
</div>
<div class="sidebar">
<a href="#"><img src="img/banner.png"></a><br>
<a href="#"><img src="img/banner.png"></a>
</div>
</div>
<footer>
<div id="fnav"">
<ul>
<li class="fmenu-item"><a href="#">HOME</a></li>
<li class="fmenu-item"><a href="#">会社情報</a></li>
<li class="fmenu-item"><a href="#">製品情報</a></li>
<li class="fmenu-item"><a href="#">採用情報</a></li>
<li class="fmenu-item"><a href="#">お知らせ</a></li>
<li class="fmenu-item"><a href="#">サポート</a></li>
<li class="fmenu-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div class="copyright">
COPYRIGHT © SAMPLE Template .ALL RIGHTS RESERVED.
</div>
</div>
</footer>
CSS
#content .mainbar{
float: left;
width: 736px;
}
.sidebar{
float: right;
width: 214px;
}
#fnav{
font-size: 14px;
margin-bottom: 10px;
text-align: center;
background: #eee;
}
#fnav ul{
display: flex;
list-style: none;
margin: auto;
width: 1000px;
}
#fnav ul li.fmenu-item {
flex-grow: 1;
padding: 10px 0 10px 0;
}
#fnav ul li.fmenu-item a{
color: #262d33;
text-decoration: none;
}
.copyright{
font-size:10px;
color:#444;
text-align:center;
position: relative;
margin-bottom: 10px;
letter-spacing: 0.1em;
}
答案 0 :(得分:2)
也应用此样式,可以解决您的问题。
footer {
float: left;
width: 100%;
}
答案 1 :(得分:2)
希望这可以帮助您footer
风格
footer {
float: right;
width: 100%;
}
答案 2 :(得分:1)
如果您使用的是Bootstrap 4,则无需使用Float。请检查以下示例,它可能会对您有所帮助。
.content-bar {
min-height: 450px;
background: #ddd;
}
.side-bar {
min-height: 450px;
background: #eee;
}
footer {
background: #ccc;
margin-top: 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<header></header>
<main>
<section>
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-9">
<div class="content-bar">
Mainbar
</div>
</div>
<div class="col-sm-4 col-lg-3">
<div class="side-bar">
Sidebar
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
Footer
</footer>
</body>
</html>