Question

我在页脚中使用了text-align将文本和无序列表一直定位到页面的右下角。我想在右下角的文本和页面边缘之间留出一点空间。使用右对齐文本后，无论我做什么，我文本的最后一部分总是向右推到右下角的窗口边缘。我尝试使用左右边距但是到目前为止这还没有解决问题，这里有一个jsfiddle我的代码：http://jsfiddle.net/sdaless/PM5Na/如果有人可以帮助我会感激它，谢谢！

这是我的页脚css和html：

HTML：

<footer>
    <div id="footer-container">
        <ul id="footerlist">
            <hr>
            <li><a href="#">Advertising Programs</a></li>
            <li><a href="#">Business Solutions</a></li>
            <li><a href="#">Privacy &amp; Terms</a></li>
            <li><a href="#">+Google</a></li>
            <li><a href="#">About Google</a></li>
</footer>

的CSS：

#footer-container {

    padding: 5px 5px;
    position: fixed;
    bottom: 2px;
    width: 100%;
    text-align: right;

}

#footer-container ul li a {
    color:#656565;
    text-decoration: none;
    font-size: 13px;
    padding: 0 7px;
    font-family: Arial;
}

#footerlist li {
    display: inline;
    list-style-type: none;  
}

Answer 1

将您的HTML更改为：

<footer>
    <div id="footer-container">
        <ul id="footerlist">
            <hr>
            <li><a href="#">Advertising Programs</a></li>
            <li><a href="#">Business Solutions</a></li>
            <li><a href="#">Privacy &amp; Terms</a></li>
            <li><a href="#">+Google</a></li>
            <li style='margin-right: 10px'><a href="#">About Google</a></li>
</footer>

或者使用这个css：

#footerlist li:last-child {
    margin-right: 10px;
}

Answer 2

使用以下代码：

<footer>
<div id="footer-container">
    <ul id="footerlist" style="padding-right:10px">
        <hr>
        <li><a href="#">Advertising Programs</a></li>
        <li><a href="#">Business Solutions</a></li>
        <li><a href="#">Privacy &amp; Terms</a></li>
        <li><a href="#">+Google</a></li>
        <li><a href="#">About Google</a></li>
</footer>

Answer 3

要么这样做：

#footer-container {
    padding: 5px 5px;
    position: fixed;
    bottom: 2px;
    left:0; right:0; /* width:100%; */
    text-align: right;
}

或者

#footer-container {
    padding: 5px 5px;
    position: fixed;
    bottom: 2px;
    width:100%;
    box-sizing: border-box; /* so width:100% defines border box  */
    text-align: right;
}

使用文本缩进与文本对齐

3 个答案: