Question

这是我在StackOverflow上的第一篇文章，我对此感到非常兴奋，因为谷歌经常把我带到这里寻找全面的答案。

无论如何，我的问题很简单，但我似乎无法弄明白。我试图在同一行上对齐三个小图标，但在我的页面/帖子标题右侧。帖子标题代码如下所示：

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

3个图标需要有自己的ID才能正常运行。它们插入如下：

`#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插入3个图标。谁能帮我吗？我很欣赏它。）

全部谢谢

修改

我忘了提到图标的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

尝试将您的#post-heading h1浮动到左侧：

#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

您有两种选择。

第一拳是

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

Example

第二是

.post_heading h1{float:left;}

Example

与CSS水平对齐

4 个答案: