Question

我有一个960网格模板，我的徽标最左边，并且想要在标题中最右边放置一些图标。我不能为我的生活做到这一点，并希望得到一些帮助。

这是标题代码：

<body>
  <div class="container_12">
    <header>
        <h1><a href="/">some title</a></h1>
    </header>

这是本节的CSS：

header,
h2 {background: url(img/header.gif) bottom left no-repeat; padding: 20px 0 10px 0;}
header{height:45px;}
h1 {background: url(img/logo.png) top left no-repeat; width:140px; height: 31px; display:block; text-indent:-999em; font-size:0;}
.small p {font-size: 12px; }
p.success {padding: 10px; background: #adefa0; font-size: 16px;}

我想在最右边放一个twitter，facebook和linkedin图标，这些图标位于我的/ img /文件夹中，但无法正确对齐，一切都很正确，一团糟。

有人可以帮忙。

谢谢，菲利普

Answer 1

您是否尝试将它们放入标题div中右侧浮动的容器中？

.icon_container {
   float: right;
   margin-right: 10px;
}

<body>
  <div class="container_12">
    <header>
        <div class="icon_container">
            <a href="http://example.com">Example</a> |
            <a href="http://foo.com">Foo</a> |
            <a href="http://bar.com">Bar</a>
        </div>
        <h1><a href="/">some title</a></h1>
    </header>

Answer 2

<header>
    <h1><a href="/">some title</a></h1>
    <ul id='socialnetworkmenu'>
        <li><a href="twitter.com"><img src='img/twitter.png' alt='Twitter'/></a>
        <li><a href="facebook.com"><img src='img/facebook.png' alt='Facebook'/></a>
        <li><a href="LinkedIn.com"><img src='linkedin.png' alt='LinkedIn'/></a>
    </ul>
</header>

#socialnetworkmenu{float:right}
#socialnetworkmenu li{float:left; padding:5px}
header h1{float:left}

这可以让你走上正轨

图标对齐问题

2 个答案: