css - Logo 不会在标题中向左浮动？

Question

我试图将我的 Logo float 到页眉中的左侧，但它根本没有 float 到左侧。如果有人能指出我的错误，我将不胜感激，因为我是 CSS 的新手。

如果您想实时查看我的问题，这是我的网站:http://cashski.com/

这是我的 HTML 代码:

<div id="navigation">
    <div class="center_navigation">
        <a href="contact.php">Contact</a>
        <a href="buy-instagram-followers.php">Instagram Followers</a>
        <a href="buy-instagram-photo-likes.php">Instagram Photo Likes</a>
        <a href="index.php"><img src="img/logo.png" /></a>
    </div>
</div>

这是我的 CSS 代码:

body {
    padding: 0px;
    margin: 0px;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}
#navigation{
    width: 100%;
    height: 50px;
    margin: 0px auto;
    position: relative;
    background-color: #2d5b89;
    border-bottom: 1px solid #244a75;
}
.center_navigation {
    width: 960px;
    height: 50px;
    margin:0px auto;
    font-size: 16px;
}
.center_navigation a {
    padding: 10px 0 10px 30px;
    float: right;
    margin-top: 4px;
    color: #babcc5;
    text-decoration: none;
}
.center_navigation a:hover {
    color: white;
}
.center_navigation a img {
    float: left;
}

Answer 1

问题是你所有的 anchor 标签都是 float:right 并且你的图像在 anchor 标签内，所以制作 img float:left 变化不大。

所以你要么需要将样式放在图像的容器上，即。像这样的 anchor 标记

<a href="index.php" style="float: left;">
   <img src="img/logo.png">
</a>

或者如果你的图片总是在最后一个 anchor 标签中，那么你也可以使用这个

.center_navigation a:last-child{
    float: left;
}

Js Fiddle Demo