0

我试图让 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;
}
4

1 回答 1

0

好的，

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

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

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 */
}

请参阅编辑过的小提琴。

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

干杯，杰伦

于 2013-06-09T21:39:21.483 回答