Question

我无法弄清楚为什么Back to top链接不会浮动到宽度为960px的“页脚区域”的右侧。当我运行代码时，back to top链接位于页脚中间。在这里是我的代码，任何人得到为什么它不会工作？

HTML：

            <div id="fotsd">

                <div id="fotl">
                    <h5> &copy something </h5>
                </div>

                <div id="fotr>
                    <p id="fotrb">Back to top</p>
                </div>
            </div>

        </footer>

CSS：

#fots{
background-color: #ebebeb;
width: 100%;
}
#fotsd{
height: 50px;
padding-top:10px;
padding-left 5px;
padding-right: 5px;
width: 960px;
display: block;
margin-left: auto;
margin-right: auto;
}
#fotl{
width: 480px;
float: left;
font-family: 'Raleway', sans-serif;
}
#fotr{
width: 480px;
float: right;
}

Answer 1

只需将text-align:right添加到您的CSS中：

#fotr{
  width: 480px;
  float: right;
  text-align:right;
}

Answer 2

代码中存在一些错误。另外，我添加了一个红色背景来演示正确对齐的元素：

<footer>
    <div id="fotsd">
        <div id="fotl">
             <h5> &copy Air Dzenky 2014 </h5>
        </div>
        <div id="fotr">
            <p id="fotrb">Back to top</p>
        </div>
    </div>
</footer>

http://jsfiddle.net/jazztorbs/3rgufzf5/

Answer 3

使用text-align right应该可以解决问题。这里也是一个有用的主题： Difference between float and align property in CSS

无法在页脚右侧浮动链接？

3 个答案: