встроенный блок и выравнивание текста не работают в одном div

Question

    <div style="text-align:right;border-radius:6px;padding:4px;border-color:grey;background-color:#D8D8D8;">text</div>

Я хочу выровнять текст по правому краю, а также использовать inline-block. Но когда я использовал inline-block, он сдвигается в начало div, т.е. в левую сторону

Answer 1

Если я правильно понял, вы пытаетесь поместить div с правой стороны, и его ширина будет шириной текста.Вы можете добиться этого с помощью родительского элемента, например:

<div style="text-align: right;">
  <div style="display: inline-block; text-align:right;border-radius:6px;padding:4px;border-color:grey;background-color:#D8D8D8;">text</div>
</div>

Или с помощью функции float (и clear) следующим образом: (Если вы делаете это, вам не нужен встроенный блок отображения)

<div style="float: right; clear: left; text-align:right;border-radius:6px;padding:4px;border-color:grey;background-color:#D8D8D8;">text</div>

Надеюсь, это поможет.