Question

我想让3个图标与我网站的标题水平对齐。我似乎无法将它们与我的横幅相同。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>
    CrossFit Villains
    </title>
</head>

<link rel="stylesheet" type="text/css" href="style.css" />

<body>
    <header>
        <span class="title">
            <a href="crossfitvillains.com">CrossFit Villains</a>
        </span>
        <div id="social">
            <img src="fb.png" />
            <img src="bird.png" />
            <img src="tv.png" />
        </div>

        <br />
        <span>1702 McAra Street, Regina, SK</span>
        <br />
        <br />
    </header>

    <div id="banner">
        <img src ="banner.jpg" />
    </div>

图标的CSS：

#social img {
    float: right;
    width: 70px;
    height: 70px;
}

Answer 1

奥莱特，

首先，请确保隐藏a元素而不是img。标题也应该浮动，以便正确地对齐它们。

还要为标题中的其他span元素提供类，以便您可以对其应用样式。使用<br />在HTML中的元素之间的新行是错误的做法。

span.title {
     float:left;   
}

#social {
    float:right;
}

#social a {
    float:left;
    margin-right:2px; /* just for the spacing of the elements in example */
}
span.address { /* Added this class to the span in the HTML for styling */
    float:left;
}

div#banner {
  clear:both; /* to replace the <br /> tag */
}

请参阅已修改的fiddle。

注意：图片没有正确链接，所以我给了“图标”一个红色背景，你的身体是黑色的，以便于阅读..

干杯，Jeroen

标题图标在错误的位置

1 个答案: