Question

我在简单的网站上工作，菜单栏在向下滚动时固定在页面顶部，该部分工作正常。

我有两个div标签，一个浮动到左侧，带有文本标识，另一个div标签浮动到右侧，带有ul菜单。

该网站的主要内容是960 x [可变高度]内容区域。

我总是希望我的徽标向左浮动，以便左对齐到内容区域的左边缘和菜单的右端，始终与我的内容区域的右端对齐。因此，如果网站大于960px，则徽标始终为0px，带有填充的ul列表末尾为960px。

我的徽标样式

Heading container:
position: relative;
background-color: white;
height: 120px;
margin: 0px auto;
border-bottom: solid 2px #ffc900;

position:fixed;
z-index: 1;
top:0;
left:0;
right:0;
margin:0;

Logo Container H1:
float: left;
font-size: 48px;
color: #ffc900;
text-transform: uppercase;
padding: 15px 0px 0px 120px;
font-weight: normal;

Heading container H5:
clear: both;
float: left;
font-size: 16px;
color: #0070ff;
padding: 0px 0px 0px 124px;
font-weight: normal;

这是我的列表样式：

Main_Nav:
float: right;
display: block;
position: relative;
text-decoration: none;
color: #0070ff;
padding: 7px 20px 10px 20px;
margin: -4px 4px 0px 0px;
left: -65px;    


Main_Nav a, .Main_Nav li:
text-decoration: none;
float: left;
display: block;
color: #0070ff;
margin: -5px 3px 0px 0px;
left: 170px;


Main_Nav a 
padding: 7px 15px 10px 15px;

Answer 1

这样做您的徽标。你的菜单看起来很好看。

#Logo {
position: absolute; //add this
left: 0;  //add this
top: 0;  //add this
float: left; // remove this line
font-size: 48px;
color: #ffc900;
text-transform: uppercase;
padding: 15px 0px 0px 120px;
font-weight: normal;
}

正确对齐CSS菜单

1 个答案: