文本右对齐和填充右答案

【问题标题】：text-align right and padding right文本右对齐和填充右
【发布时间】：2022-02-11 05:37:57
【问题描述】：

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

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

.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

【问题讨论】：

什么没有按预期工作？
你能提供一个jsfiddle吗？
它工作正常，如果你的意思是容器 div 应该扩大整个页面宽度，你应该删除它的 width 声明。
像@Callidior 一样，我很想知道这里到底有什么问题。
s30.postimg.org/x8tzg3xrl/Untitled_1.jpg 注意没有填充。 CSS 上没有重置。

标签： html css padding text-align

【解决方案1】：

我想我理解你的困惑。

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

答案是 padding 使 div 的宽度变大。因此，当一切都在左侧（填充和文本对齐）时，div 变得更宽并且内容被移动。

但是当一切都在右边（填充和文本对齐）时，什么都没有移动......对吗？错了。

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

这是没有填充的代码

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

你可以看到文字就在边缘。

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

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

发生了两件事。

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

这些变化抵消了，内容没有移动。

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

【讨论】：

嗯，我试过你的代码...似乎不知何故...背景图像被推到左边...s15.postimg.org/7sy95ofrv/Untitled_1.jpg
试过我的代码了吗？我的代码是您问题的答案。它不是对任何东西的修复，它是填充作用的可视化。
我知道，它向我展示了我想看到的填充，但不确定为什么“背景图像”位置在没有任何位置更改的情况下关闭。
它没有推送背景图片。默认情况下，图像向左对齐。当您在右侧添加填充时，宽度会增加，并且边框向右移动 50 像素。但是背景保持在原来的位置，因为它是左对齐的。
padding 扩展了 div 的宽度。这是个大问题。谷歌“box-sizing”以了解更多信息。

【解决方案2】：

在装有文本的容器上试试这个

.rightctext{ box-sizing: border-box; padding-right:10px;}

box-sizing 属性将强制容器对象考虑右侧的填充。

希望这就是您想要实现的目标。 *注意，相应地调整像素。

【讨论】：