Как реализовать выравнивание элементов внутри DIV?

Question

[cadash2014]

Как лучше выровнять элементы внутри DIV по правой стороне?
HTML:

spoiler

<div class="banner">
    <span class="banner-caption">Будьте в курсе</span>
    <ul class="banner-ul">
      <li>Чтобы узнать больше</li>
      <li>Чтобы узнать больше</li>
      <li>Чтобы узнать больше</li>
      <li>Чтобы узнать больше</li>
      <li>Чтобы узнать больше</li>
    </ul>
    <a class="banner-button" href="HtmlPage.html">Кнопка баннера</a>
  </div>
</div>

CSS:

spoiler

.banner {
  background: url('images/banner.png') no-repeat;
  height: 290px;
  margin: 10px 0 0 0;
  width: 624px;
}

.banner-button {
  background-image: linear-gradient(to bottom, #fee000, #fbc500 50%, #fabf00 50%, #f8ac00);
  border-radius: 8px;
  color: #702020;
  display: block;
  font-size: 18px;
  line-height: 35px;
  margin: 0 0 0 0;
  text-align: center;
  text-decoration: none;
  width: 180px;
}

.banner-caption {
  background-color: #b6ff00;
  color: #000;
  font-size: 24px;
  margin: 0 0 0 0;
  padding: 3px;
}

.banner-ul {
  list-style-image: url('images/marker.png');
}

Comments

[cadash2014]

Необходимо выровнять все три элемента по правой стороне. Сначала заголовок, под ним список и под списком кнопка.

Answer 1

[Сергей Мельников]

jsfiddle.net/uK8cc

Answer 2

[Илья Милошевич]

Добавьте в описание класса .banner правило float со значением right. Короче:

.banner {
  background: url('images/banner.png') no-repeat;
  height: 290px;
  margin: 10px 0 0 0;
  width: 624px;
  float: right; /* добавленное правило */
}

Answer 3

[Юрий Лобанов]

jsfiddle.net/iiil/xwgMf/1

Comments

[Илья Милошевич]

Думаю, что для вашего решения в .banner-ul стоит добавить list-style-position: inside.

[Юрий Лобанов]

@miloshilya выравнивание по правому краю - что изменится? jsfiddle.net/iiil/xwgMf/3