Css 标题图标位于错误位置_Css_Html

Css 标题图标位于错误位置

css html

Css 标题图标位于错误位置,css,html,Css,Html,我试图得到3个图标水平对齐与我的网站标题。我似乎无法将它们与我的横幅放在同一范围内 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title> CrossFit Villains </title> </head> <link rel="stylesheet" type="text/css

我试图得到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>

好的

首先，确保浮动

元素，而不是

img

。标题也应该浮动，以便正确对齐

还为标题中的另一个

span

元素提供类，以便对其应用样式。在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 */ }

span.title{ 浮动：左； } #社会的{ 浮动：对； } #社会的{ 浮动：左；右边距：2px；/*仅用于示例中元素的间距*/ } span.address{/*将该类添加到HTML中的span中以进行样式设置*/ 浮动：左； } 分区横幅{ 清除：两者；/*以替换标签 */ }
请参阅已编辑的
注意：图片链接不正确，所以我给了“图标”一个红色背景，给你的身体一个黑色背景，以便于阅读

干杯，Jeroen
你能提供一个JSFIDLE吗？我以前从未使用过JSFIDLE，所以如果我把事情弄糟了，请原谅我。我没有添加所有的图片。也许一个实时链接会更好。这把小提琴一点用也没有。
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 */ }