文本右对齐和右填充

Question

我到处都看到这个帖子，没有真正的帮助，或者它被无缘无故地关闭，除了版主觉得它在未来“没有帮助”，尽管谷歌得出了一个很好的结果，总结了大约 55,000 多个相关结果。

那么，为什么 padding-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;
}

超文本标记语言

<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;
}

实例

Answer 1

我想我理解你的困惑。

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

答案是内边距使 div 的宽度变大。因此，当所有内容都位于左侧（填充和文本对齐）时，div 会变宽并且内容会移动。

但是，当一切都在右侧（填充和文本对齐）时，没有任何移动......对吗？错误的。

div 向右增长了添加填充的正确像素数。内容保持在原来的位置，因为偏移发生在内容之后，而不是像左对齐时那样发生在之前。添加边框后很容易可视化。

这是没有填充的代码

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

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

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

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

发生了两件事。

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

这些更改会抵消，并且内容不会移动。

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