Как вы выравниваете элемент блока по правому краю его родителя (с помощью CSS)?

Question

Мне известно, что вы можете центрировать элемент блока, установив для левого и правого поля значение auto.

Однако можно ли выровнять его по правому краю? И как это будет сделано?

Редактировать: без с использованием float: right (потому что, похоже, это не работает, по крайней мере, с <ul>)

Снова отредактируйте: вот фрагмент кода:

<td style='vertical-align: top; text-align: center;'>
  <b>Choices:</b><br><br>
  <ul id='orderchoices' style='margin-left: auto; margin-right: auto;'>
    ...
  </ul>
</td>

Вот стиль для #orderchoices

#orderchoices li {
  border: 1px solid #666;
  background: #333 url(images/dark_gloss.png) repeat-x;
  color: #eee;
  margin: 3px;
  padding: 5px;
  cursor: pointer;
  width: 160px;
  font-style: italic;
}

Я хочу выровнять ul по правому краю в td

Answer 1

<div class="outer">
    <div class="inner">I'm the inner element!</div>
</div>
<style type="text/css">
    .outer { position:relative; }
    .inner { position:absolute; right:0px; }
</style>

Если ваш внутренний элемент расположен абсолютно внутри контейнера, который расположен относительно, вы можете использовать top, right, bottom и left, чтобы указать расстояние внутреннего элемента от краев родительского контейнера.

Имеет смысл?

Answer 2

Чтобы выровнять элемент блока по правому краю, попробуйте использовать float. Не забудьте добавить элемент после, чтобы очистить объект с плавающей точкой, чтобы нижняя часть родительского элемента соответствовала нижней части элемента с плавающей точкой.

    <div id="parent">
     <div style="float: right">
      <div>your stuff here</div>
     </div>
     <div style="clear:both"></div>
    </div>

Метод 'position: absolute' также может работать, но когда элемент позиционируется таким образом, он удаляется из потока html, поэтому его родительский элемент не знает высоту элемента абсолютного позиционирования - следовательно, причина, по которой он может соскользнуть с конца страницы. Вы можете преодолеть это, установив высоту для родителя, но это, конечно, зависит от того, что а) вы знаете высоту перед рукой, б) она не изменится