Question

我试图将标识浮动到标题的左侧，但它根本不会向左浮动。如果有人可以指出我的错误，我会非常感激，因为我是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的变化不会太大。

所以你要么把风格放在图像的容器上，即。像这样的锚标签

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

或者如果您的图片始终位于最后一个锚标记中，那么您也可以使用此

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

Js Fiddle Demo

徽标在标题中没有浮动？

1 个答案: