HTML CSS 页脚设计问题

Question

我正在尝试建立一个网站，但在我的页脚部分我遇到了一个问题，我无法将我的

标签正确定位在社交媒体图标下方，也无法定位 li水平 style.also 中的元素 "terms of use"、"content guidelines"、"report error" 删除文本装饰后，我无法删除 li 上的下划线，也无法删除 li 元素中的项目符号。 .请帮忙

footer
{
width: 100%;
background-color: #2d2d2d;
padding: 80px 0px;
}
footer h2 {
    font-size: 16px;
    color: #a1a1a1;
    text-transform: uppercase;
 margin-top: -20px;
    margin-bottom: 25px;
 margin-left: 20px;
 

 
}
h2 {
    font-size: 20px;
 font-family: 'Gothic-Bold';
    font-weight: normal;
 position:sticky;
 margin-bottom: 20px;
}


* {
    padding: 0px;
    margin: 0px;
}

.ft-quick-links
{
 float:left;
 width:400px;
}
.ft-quick-links ul li{
 float:left;
 margin-right:6px;
 margin-bottom:20px;
 margin-left: 5px;
 list-style: none;
 padding-right: 5px;
 
 
}
.ft-quick-links li a{
 padding: 8px 15px;
 font-size: 13px;
 color: #959595;
 background:#202020 ;
 text-decoration: none;
 margin-bottom: 30px;
}
.ft-quick-links li a:hover{
 background:#171717;
}
.footer-btm-wrapp{
 width:100%;
 display:table;
 background:#1b1b1b;
}
.ft-btm-left {
 float:left;
}
.ft-btm-left ul li{
 float:left;
 margin-right:40px;
}
.ft-btm-left ul li a{
 font-size:12px;
 color:#5f5f5f;
}
.ft-btm-left ul li a:hover{
 text-decoration:none;
}
.footer-btm-wrapp .wrapper{
 padding:20px 0px;
}
.ft-social ul li{
 float: right;
 padding-right: 20px;
 padding-top: 15px;
 list-style: none;
}
.footer-btm-wrapp .wrapper{
 padding:8px 0px;
 list-style: none;
}


.copy-rights p{
 color:#959595;
 font-size:13px;
 list-style: none;
 margin-bottom: 10px;
 padding: 60px 20px 10px;
 float:right;
 text-align:right;
 list-style: none;
 
 
}
.wrapper{
 width:1100px;
 margin:0px auto;
 position:relative;
}

.ft-lines{
    font-size: 12px;
    color: #5f5f5f;
 list-style: none;
 margin-bottom: 10px;
 text-decoration: none;
 
}

<!DOCTYPE html>
<html>
<body>
 <link rel="stylesheet"type="text/css" href="foot1.css">
<footer>
 
 <div class="wrapper">
 <div class="ft-quick-links">
  <h2>Quick Links</h2>
  <ul class="clearfix">
   <li><a href="#">About</a></li>
   <li><a href="#">Media</a></li>
   <li><a href="#">Feedback</a></li>
   <li><a href="#">Privacy policy</a></li>
   </ul>
  </div>
 </div>
  <div class="wrapper">
  <div class="ft-social">
      <ul class="clearfix">  
       
   
   <li><a href="http://www.youtube.com"><img src="images/yt.png"/></a></li>
   <li><a href="http://www.instagram.com"><img src="images/ig.png"/></a></li>
   <li><a href="http://www.twitter.com"><img src="images/twit.png" /></a></li>
   <li><a href="http://www.facebook.com"><img src="images/fb.png" /></a></li>
 
   </ul>
  </div>
  </div>
   <div class="wrapper">
   <div class="ft-lines">
   <ul class="clearfix">
    <li><a href="#">Terms of Use</a></li>
    <li><a href="#">Content Guidelines</a></li>
    <li><a href="#">Report error </a></li>
 </ul> 
    <div class="copy-rights"><p> ©  2017 Rodeo labs. All rights reserved</p>
   </div>
 </div>
 </div>
 </footer>
 
 </body>
</html>

Answer 1

希望这段代码对你有用

footer
{width: 100%;background-color: #2d2d2d;/* padding: 54px 0px; */display: flex;height: 6vmin;}
footer h2 {
    font-size: 14px;
    color: #a1a1a1;
    text-transform: uppercase;
 

 
}
h2 {
    font-size: 20px;
    font-family: 'Gothic-Bold';
    font-weight: normal;
    /* position:sticky; */
}

.ft-quick-links
{
 display: flex;
 align-items: center;
}

.ft-quick-links a{
 padding: 5px;
 font-size: 13px;
 color: #959595;
 background:#202020;
 text-decoration: none;
 /* margin-bottom: 30px; */
}
.ft-quick-links a:hover{
 background:#171717;
}
.footer-btm-wrapp{
 width:100%;
 display:table;
 background:#1b1b1b;
}
.ft-btm-left {
 float:left;
}

.ft-btm-left a{
 font-size:12px;
 color:#5f5f5f;
}
.ft-btm-left a:hover{
 text-decoration:none;
}

.ft-social i{
 float: right;
 padding-right: 20px;
 padding-top: 15px;
 list-style: none;
}


.copy-rights p{
 color:#959595;
 font-size:13px;
 list-style: none;
 text-align:right;
 list-style: none;
 
 
}

.ft-lines{
    /* font-size: 12px; */
    color: #5f5f5f;
    /* list-style: none; */
    /* margin-bottom: 10px; */
    text-decoration: none;
}

<footer>
 
 <div class="ft-quick-links">
  <h2>Quick Links</h2>
  
   <a href="#">About</a>
   <a href="#">Media</a>
   <a href="#">Feedback</a>
   <a href="#">Privacy policy</a>
   
  </div>
  
  <div class="ft-quick-links">
       
       
   
   <a href="http://www.youtube.com"><img src="images/yt.png"></a>
   <a href="http://www.instagram.com"><img src="images/ig.png"></a>
   <a href="http://www.twitter.com"><img src="images/twit.png"></a>
   <a href="http://www.facebook.com"><img src="images/fb.png"></a>
 
  
  </div>
  
   <div class="ft-quick-links">
   
    <a href="#">Terms of Use</a>
    <a href="#">Content Guidelines</a>
    <a href="#">Report error </a><!--
--> 
    
   
 </div>
 <p> ©  2017 Rodeo labs. All rights reserved</p>
 </footer>

Answer 2

尝试关注您的 css。我添加了一些评论。

.ft-lines ul li{
  list-style: none;
  display: inline-block; # This will display li side by side
  padding-right: 10px; # add for have a bit of space
  }
.ft-lines ul li a {
  text-decoration: none;
  }

.ft-lines {
  clear: both; # to clear the floating elements
  float: right;
 }

Answer 3

尝试在 div 中添加前 2 个 div.wrapper 并设置样式。根据您在样式方面所做的工作，第三个 div.wrapper 被插入到 DOM.

的顶部内

同时在不同的上下文中添加底部 div.wrapper（其中包含三个链接和版权的 div）并分别进行样式设置。

如果您这样做是为了练习，那很好。您编写的这段代码需要更多改进。在生产代码中，这不是推荐的代码编写方式。请遵循一些准则。谷歌搜索 'HTML and CSS best practices guidelines' 会帮助你。

PS - 没有编辑您的代码，因为它需要 re-engineering.

Answer 4

You are not using any framework like bootstrap or foundation. So, first of all, make a proper design of footer layout.
For example - 
<ul class="demo">
<li><a href="#">demo1</a></li>
<li><a href="#">demo2</a></li>
<li><a href="#">demo3</a></li>
</ul>

To remove bullet  from li use -
ul.demo li
{
list-style-type:none;
}
To remove text-decoration from a use -
.demo li a
{
text-decoration:none;
}

Answer 5

.ft-lines{
    font-size: 12px;
    margin-top: 25px; /*positioning li elements "terms of use","content guidelines","report error"*/
    
}

.ft-lines li {
    list-style: none; /*remove bullets*/ 
    display: inline; /*display in horizontal line li elements*/
    margin: 0 10px 0 10px; /*add spaces between links*/
}

.ft-lines a {
    text-decoration: none; /*removes underline on links*/
    color: #959595;
}

.ft-lines a:hover {
    text-decoration: underline; /*adds underline on links*/
}

只需删除您的 .ft-lines 并添加我的希望这对您有所帮助。

HTML CSS 页脚设计问题

HTML CSS footer design issue

html

css

footer