html - 文本右对齐和右填充

Question

我到处都看到这个帖子，没有真正的帮助，或者它被无缘无故地关闭，除了版主认为它在未来会“无用”，尽管谷歌总结了大约 55,000 多个相关结果的一个不错的结果.

那么，为什么 padding-right 不能与父项一起使用，而 text-align-right 子项不能？

.rightcbar {
    display: block;
    font-family: 'Roboto', sans-serif;
    text-shadow: 0px 0px 20px #dbd69d;
    padding-right: 50px;
    height: 152px;
    width: 592px;
    line-height: 152px;
    background: url(rightcbar.png) no-repeat;
}

.rightcbar .rightctext {
    display: inline-block;
    width: 100%;
    text-align: right;
    font-size: 25px;
    color: #f3f1de;
    font-size: 25px;
    font-family: 'Roboto', sans-serif;
    text-shadow: 0px 0px 10px #aaa;
    -webkit-font-smoothing: subpixel-antialiased;
}

HTML

<div id="rightc">
    <div class="rightcbar">
        <div class="rightctext">Test</div>
    </div>
    <div class="rightcbar">
        <div class="rightctext">Test</div>
    </div>
    <div class="rightcbar">
        <div class="rightctext">Test</div>
    </div>
</div>

Smeegs 帮助准确解释了为什么事情没有按照我的预期进行；如果你感兴趣。这是修改后的工作代码。

.rightcbar {
    display: block;
    font-family: 'Roboto', sans-serif;
    text-shadow: 0px 0px 20px #dbd69d;
    padding-right: 50px;
    height: 152px;
    width: 592px;
    line-height: 152px;
    background: url(rightcbar.png) no-repeat;
    background-position: center right;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;    
}

.rightcbar .rightctext {
    display: inline-block;
    width: 100%;
    text-align: right;
    font-size: 25px;
    color: #f3f1de;
    font-size: 25px;
    font-family: 'Roboto', sans-serif;
    text-shadow: 0px 0px 10px #aaa;
    -webkit-font-smoothing: subpixel-antialiased;
    cursor: pointer;
}

Live example

Answer 1

我想我理解你的困惑。

(我认为)您要问的是，为什么当您向左侧添加填充时，它会移动内容，但当您将其添加到右侧时却不会。

答案是 padding 使 div 的宽度变大。所以当一切都在左边时(填充和文本对齐)，div 变宽并且内容被移动。

但是当一切都在右边(填充和文本对齐)时，什么都不会移动……对吗？错了。

div 向右增长了正确数量的像素并添加了填充。并且内容保留在原处，因为偏移发生在内容之后，而不是像您离开对齐时那样发生之前。添加边框后很容易可视化。

这是没有填充的代码

http://jsfiddle.net/z5PJx/1/

您可以看到文本就在边缘。

这里是相同的代码 padding-right: 50px;

http://jsfiddle.net/z5PJx/2/

发生了两件事。

1. div 增长了 50px；
2. 内容向左移动了50px；

那些变化偏移了，内容没有移动。

在这两种情况下，div 的宽度都向右增长。但是填充的方向发生了变化。