text-align right and padding right

Question

Я видел, как это было опубликовано везде, без реальной помощи, или оно закрывалось без причины, кроме того, модераторы чувствовали, что это будет «бесполезно» в будущем, хотя google взбивает хороший результат суммирования приблизительно 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 расширяется и содержимое перемещается.

Но когда все направо (заполнение и выравнивание текста), ничего не движется ... правильно? Неправильно.

Разница увеличивается справа от количества пикселей, добавляя отступы. И контент остается там, где это происходит, потому что смещение происходит ПОСЛЕ содержания, а не раньше, когда вы выходите из выравнивания. Легко визуализировать с добавленной рамкой.

Вот код без заполнения

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

Вы можете увидеть, что текст находится прямо на краю.

Вот тот же код с padding-right: 50px;

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

произошли две вещи.

1. Разница выросла на 50px;
2. Содержимое было перемещено налево 50px;

Эти изменения смещены, и содержимое не перемещается.

В обеих ситуациях ширина div увеличивается вправо. Но направление отступов меняется.