css - 一些 div 在页 footer 分出现问题

Question

所有这些定位问题让我很头疼，所以我决定问问你；我已经看过关于这类东西定位的博客，但作为初学者，要找到确切的答案有点困难。

我有以下问题:

在图像中你会看到我有什么(我不能发布它，所以这里是 SS 的链接:http://gyazo.com/bbea3f21abf77515288719296e496fcc)，我想移动:页脚底部的“copyright blablabla”使用页脚的所有宽度，我已经尝试了所有方法:

footer #copyright{
    font-size: 75%;
    top: 20em; /* just trying*/
    position: relative;
    text-align: center;
    width: 100%;

但 div 不断触及其他元素(条款和条件、隐私并保持与您在图像中看到的完全一样)。 “条款和条件等”的代码是这个:

footer li a{
    font-size: 90%;
    text-decoration:none; /* Quita toda decoracion del texto*/
    position: relative;
      /* este comando convierte en boton el reectangulo*/
    vertical-align: text-top;
        float: right;
         width: 30%;

谁能帮帮我？

PD:我添加我的 html 代码:

    <footer>


        <li><a href="#contactus">Contact us</a></li>
        <li><a href="#privacy">Privacy policy</a></li>
        <li><a href="#terms">Terms and conditions</a></li>
        <li><a href="#aboutus">About us</a></li>

        <a id="copyright">Copyright 2015 Pepito S.L., All Right Reserved.</a>

    </footer>
</body>

关于我的 CSS，是这个:

* {
    margin: 0;
    padding: 0;
    font-family: verdana;
}

footer {
    width: 100%;
    height: 12em;
    background-color: #363636;
}

footer li {
    list-style: none;
    text-transform: uppercase;
}

footer li a{
    font-size: 90%;
    text-decoration:none; /* Quita toda decoracion del texto*/
    position: relative;
      /* este comando convierte en boton el reectangulo*/
    vertical-align: text-top;
        float: right;
         width: 30%;


         /* Borde para ver el div*/
    color: #696969;
      border: 1px solid #f00;

}

footer a #copyright{
    font-size: 5%;
    position: absolute;
    text-align: center;
    bottom: 0;

/* Borde para ver el div*/
    color: #696969;
      border: 1px solid #f00;

 }

Answer 1

您可能想要的是在页脚 div 中设置 position: relative 并将 position: absolute 放在包含版权的元素中。

<footer>
    ...
    <div class="copyright">Copyright</div>
</footer>

在CSS中

footer{
    position: relative;
}

.copyright{
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

JSFidle