html - 使用文本缩进和文本对齐

Question

我在页脚中使用 text-align right 将文本和无序列表一直定位到页面的右下角。我想在右下角的文本和页面边缘之间留一点空间。使用文本右对齐后，无论我做什么，我的文本的最后一部分总是向上推到右下角的窗口边缘。我尝试使用左右边距，但到目前为止这还没有解决问题，这是我的代码的 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;
}