Горизонтальное выравнивание с CSS

Question

это мой первый пост здесь, на StackOverflow, и я очень рад этому, поскольку Google довольно часто приводил меня сюда в поисках исчерпывающих ответов.

В любом случае, мой вопрос довольно прост, но я могуКажется, чтобы понять это.Я пытаюсь выровнять три маленьких значка в одной строке, но справа от заголовка моей страницы / записи.Код заголовка сообщения выглядит следующим образом:

<div class="post-heading">
  <h1>Title</h1>
</div>

Для правильной работы 3 значков должен иметь свой собственный идентификатор.Они вставляются следующим образом:

`#icon_container {
position: relative;
margin: 0;
padding: 0;
line-height: normal;
font-size: medium;
width: 50px;}

`#icon_container #icon_1 {
    float: right;
    background-image: url(icon.png);
    background-repeat: no-repeat;}`


`#icon_container #icon_1 A {
    width: 24px;
    height: 24px;
    display: block;}`

Итак, все, чего я пытаюсь достичь, это иметь заголовок h1 слева и в том же alignmnet справа три значка, вставленные с помощью вышеуказанного CSS.Может кто-нибудь мне помочь?Я был бы очень признателен:)

Спасибо всем

РЕДАКТИРОВАТЬ

Я забыл упомянуть HTML-код для значков;вот оно:

<div id="icon_container"><div id="icon_1"><a href="#" id="icon_1_button"></a></div><div id="icon_2....</div><div style="clear:both"></div></div>

Answer 1

h1 и изображения должны иметь

style="display:inline"

, если вы хотите, чтобы изображения имели одинаковое горизонтальное выравнивание.

Answer 2

У вас есть два варианта.

Первый - это

<div class="post-heading">
  <h1>Title</h1>
<span class="icon_container"> [icon] </span>
</div>
.post-heading *{
    display:inline;
}

Пример

2-ой -

.post_heading h1{float:left;}

Пример

Answer 3

вам нужно плавать после заголовка и элементы значков влево.

<div class="post-heading" > < h1 >Title < /h1 > < /div>
<div id='icon_container'>
    <div id='icon_1'></div>
    <div id='icon_2'></div>
</div>

#icon_container, #icon_1, #icon_2, .post_heading {float:left;}

Answer 4

Попробуйте сместить #post-heading h1 влево:

#post-heading h1 {
  float: left;
}