CSS - 标题图片

下对齐菜单选项，我是相当新的，但我已经创建了一个标题图片和菜单选项并保存为.PNG图像。CSS - 标题图片

但是，我不能得到的菜单图像对齐到屏幕的左边，而不是挂标志的边缘了。

这里是小提琴的链接：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; 
}

希望大家都能够帮助，

三江源

来源

2014-03-06 user3390063

难道我的回答解决问题了吗？ –

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

Updated Fiddle

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

来源

2014-03-06 21:53:51

嗨，对不起，只是设法回到电脑上。如果我从标题中删除我的图像，则更改将起作用。但是当图像存在时，菜单仍然位于右侧。 – user3390063

在我已经联系到小提琴，菜单是左对齐，有和没有图像。至少它在Firefox和Chrome上。你使用的是什么浏览器？ –

嗨，谢谢你的帮助。它让我思考，并且将导航栏的顶部填充更改为更大的数字，让它位于徽标下方。 – user3390063

CSS - 标题图片

回答

相关问题