我正在设计网站的页脚,并且有以下问题:
如何更改CSS,使其看起来像这样:
footer{
background-color: #e0ebeb;
list-style-type: none;
display: inline;
}
#Questions {
margin: auto;
text-align: center;
display: block;
padding: 0;
}
<footer>
<div class="Newsletter">
<h1>Get our Newsletter</h1>
<h2>Stay tuned and new gadgets everday!</h2>
</div>
<div class="secondpt" >
<div id="Questions">
<h1>Do you have a question </h1>
<ul>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div id="Menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Who are we ?</a></li>
<li><a href="#">Newest</a></li>
<li><a href="#">The Best</a></li>
</ul>
</div>
<div id="languages">
<ul>
<li><a href="#">English</a></li>
<li><a href="#">Deutsch</a></li>
<li><a href="#">Français</a></li>
</ul>
</div>
</div>
<hr>
<div>
<h1>Connect with us</h1>
</div>
</footer>
最佳答案
您可以使用float
属性实现此目的:
*{
font-size:15px;
}
ul {
list-style:none;
}
footer{
background-color: #e0ebeb;
list-style-type: none;
display: inline;
}
.secondpt {
width: 100%;
}
div#Menu {
float: left;
}
div#languages {
float: right;
}
.right{
float:right
}
.left{
float:left
}
<footer>
<div class="Newsletter">
<h1>Get our Newsletter</h1>
<h2>Stay tuned and new gadgets everday!</h2>
</div>
<div class="secondpt" >
<div class="left">
<div id="Questions">
<h1>Do you have a question </h1>
<ul>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<div class="right">
<div id="Menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Who are we ?</a></li>
<li><a href="#">Newest</a></li>
<li><a href="#">The Best</a></li>
</ul>
</div>
<div id="languages">
<ul>
<li><a href="#">English</a></li>
<li><a href="#">Deutsch</a></li>
<li><a href="#">Français</a></li>
</ul>
</div>
</div>
</div>
<hr>
</footer>