Question

我已经看到这张贴在任何地方，没有真正的帮助，或者它被无缘无故关闭，然后主持人觉得它将来会“无益”，即使谷歌掀起了一个很好的结果，总结了55,000多个相关结果。

那么，为什么不填充正确的父作品和文本对齐正确的孩子呢？

.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

我想我理解你的困惑。

你想问的是，为什么当你向左边添加填充时，它会移动内容，但是当你将内容添加到右边时不会。

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

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

div向右增加添加填充的正确像素数。并且内容保持原样，因为偏移是在内容之后发生的，而不是在你离开对齐之前。通过添加边框可以很容易地进行可视化。

这是没有填充的代码

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

您可以看到文字正好在边缘。

以下是与padding-right: 50px;

相同的代码

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

发生了两件事。

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

这些更改已抵消，内容无法移动。

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

text-align right和padding right

1 个答案: