如果不移动导航菜单,则无法在左上角放置标识

时间:2016-01-13 14:47:24

标签: html css html5 alignment inline

我正在与一个学校项目合作并尝试重新制作一个网站。是否有人知道如何在不移动导航菜单的情况下将EA徽标放在左上角? 这是html:

    <html>
<head>
    <link rel = "stylesheet" type = "text/css" href = "css/style.css">
    <title>FIFA 16</title>
    <meta charset="utf-8">
</head>

<body>
    <div class="nav">
        <div class="ealogo"><img src="img/ealogo.png" alt="ealogo"</div>
        <a href="index.htm" target="_self" class="fifafont">FIFA</a>
        <a href="" target="_self">ULTIMATE TEAM&trade;</a>
        <a href="" target="_self">NYHETER</a>
        <a href="" target="_self">MER</a>
        <a href="" target="_self">KÖP</a>
    </div>
</body>
</html>

Css:

    body {
margin: 0;
padding: 0;
background-color: #fff;
}

    .nav {
padding: 15px;
text-align: center;
font-family: lato;
font-size: 20px;
color: white;
background-color: black;
width: 100%;
}

    a {
text-decoration: none;
color: white;
margin: 25px;
}

    .fifafont {
font-family: fifawelcome;
font-size: 30px;
}

1 个答案:

答案 0 :(得分:0)

我所做的就是给这个标识一个id并浮动一个边缘以修正填充,使其位于左上角。

#ealogo{

    margin-left: -25px;
    margin-top: -15px;
    float: left;
}

JSFiddle