Html 如何阻止列表与标题图像重叠?
我有一个网站,我正在建设,我使用的骨架CSS和一切都是响应和工作良好 我有一个菜单栏(列表)在正确的位置,但当我调整大小,它似乎重叠我的标题图像,有人知道我如何可以停止这一点 示例如下: 请向下调整浏览器的大小 HTML:Html 如何阻止列表与标题图像重叠?,html,css,list,skeleton-css-boilerplate,Html,Css,List,Skeleton Css Boilerplate,我有一个网站,我正在建设,我使用的骨架CSS和一切都是响应和工作良好 我有一个菜单栏(列表)在正确的位置,但当我调整大小,它似乎重叠我的标题图像,有人知道我如何可以停止这一点 示例如下: 请向下调整浏览器的大小 HTML: 这是因为你的导航是绝对定位的。根据您对它的期望,我可能会在正确的位置添加一些媒体查询 我可能会将标题图像向左移动一点,然后将导航向右移动-这只会在特定大小之前起作用,之后导航栏将需要不同的布局。您应该使用媒体查询来处理元素如何根据不同的大小进行定位。您使用的是#主导航的pos
这是因为你的导航是绝对定位的。根据您对它的期望,我可能会在正确的位置添加一些媒体查询
我可能会将标题图像向左移动一点,然后将导航向右移动-这只会在特定大小之前起作用,之后导航栏将需要不同的布局。您应该使用媒体查询来处理元素如何根据不同的大小进行定位。您使用的是#主导航的position:absolute,它将导航条固定到位,而不管屏幕大小如何 例如: CSS:
我们可以看看你的网站是什么样子的,以及你更改的css与原始css的比较吗?你正在为#main nav的“right”属性设置一个静态值。那不是很有反应。当你的屏幕缩小时,它总是试图从右边变成120像素。您应该将该值更改为一个百分比,或者找到某种方法使其与窗口大小成比例。Connor上方有一个链接^ah我看到@Eric Guan,我删除了静态值,并将其替换为“float:right;”这解决了问题-但我不能用填充物来移动它?
<div id="top"><center><img src="images/header.png" style="max-width:100%;"></center></div>
<header id="header" class="site-header" role="banner">
<div id="header-inner" class="container sixteen columns over">
<hgroup class="one-third column alpha">
</hgroup>
<nav id="main-nav" class="two thirds column omega">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about-us.html">About Us</a>
</li>
<li>
<a href="news.html">News</a>
</li>
<li>
<a href="dealers.html">Dealers</a>
</li>
<li>
<a href="products.html">Products</a>
</li>
<li>
<a href="http://www.cosworth-europe.co.uk/shop">Buy Online</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
#main-nav {
position: absolute;
right: 120px; /* Default */
}
@media only screen and (max-width: 700px) {
body {
#main-nav {
position: absolute;
right: 50px; /* Will apply when the screens width is smaller than 700px */
}
}
}