Question

我对此很新，但我创建了一个标题图片和菜单选项，并保存为.png图片。

但是，我无法将菜单图像对齐到屏幕左侧，而不是悬挂在徽标的边缘。

以下是小提琴的链接：http://jsfiddle.net/lozjayne/xz99w/

以下是我的代码（对不起，如果真的不那么好）

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="C:\Users\Laura-Jayne\Documents\Crestel Website\cake\html\style.css" type="text/css">
<title>Cupcake Fairy</title>
</head>

<body>
<div id="header-container">
    <div id="header">
        <div id="logo">
        <a href="#"><img src="C:\Users\Laura-Jayne\Documents\Crestel Website\cake\images\logo.png" /></a>
        </div>

        <div id="topnav">
        <ul>
    <li><a href="#"><img src="C:\Users\Laura-Jayne\Documents\Crestel Website\cake\images\home.png" alt="home" /></a></li>
            <li><a href="#"><img src="C:\Users\Laura-Jayne\Documents\Crestel Website\cake\images\about.png" alt="about" /></a></li>
            <li><a href="#"><img src="C:\Users\Laura-Jayne\Documents\Crestel Website\cake\images\gallery.png" alt="gallery" /></a></li>
            <li><a href="#"><img src="C:\Users\Laura-Jayne\Documents\Crestel Website\cake\images\contact.png" alt="contact" /></a></li>
        </ul>
        </div>
    </div>
</div>

@charset "utf-8";

body {
margin: 0px;
padding: 0px;
}

#header-container {
width: 100%;
height: 204px;
background-color: #e7fc56;
}

#header {
background-image: url("C:\Users\Laura-Jayne\Documents\Crestel Website\cake\images\header.png");
background-repeat: no-repeat;
width: 1024px;
height: 204px;
margin: auto;
}

#logo{
float: left;
padding-top: 15px;
padding-left: 160px;
}



img {
border: none;
}

#topnav {

margin: auto;
height: 76px;
width: 1024px;
padding-top: 150px;
padding-left: 158px;
}



#topnav ul li
{
display: inline;
padding: 0px;
margin: 0px;
width: 100px;
}

#topnav ul a {
text-decoration: none;
background: #e7fc56
float: left;
text-align: left;
}

希望你能提供帮助，

三江源

Answer 1

菜单当前正在向右推，远离屏幕左侧，因为它有padding-left。如果将其移除，它们将在左侧对齐。

Updated Fiddle

#topnav {
    margin: auto;
    height: 76px;
    width: 1024px;
    padding-top: 150px;
}

CSS - 对齐标题图像下方的菜单选项

1 个答案: