所以我有一个导航和一个子导航....
<div class="headerNav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#" class='galleryNavToggle'>Gallery</a></li>
<li><a href="#" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->
<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="Categories.php?action=view">Categoies</a></li>
<li><a href="Products.php?action=view">Products</a></li>
</ul>
</div><!--headerNavGallery-->
<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li><a href="willRuppel.php?action=view">William Ruppel</a></li>
<li><a href="CV.php?action=view">CV</a></li>
<li><a href="artistBio.php?action=view">Artist Bio</a></li>
<li><a href="Video.php?action=view">Video</a></li>
<li><a href="contact.php?action=view">Contact</a></li>
</ul>
</div><!--headerNavInfo-->
和他们的 CSS
.headerNav {
color: #FFFFFF;
padding-left: 150px;
padding-top: 148px;
}
.headerNavGallery {
color: #000000;
padding-left: 25px;
padding-top: 0;
}
.headerNavInfo {
color: #000000;
padding-left: 177px;
padding-top: 0;
}
我的问题是如何让它们在每个屏幕上都保持相同的位置，无论宽度如何？
最佳答案
您使用的是包装器元素吗？您可以使用父元素作为 body 元素的第一个子元素，并在其中包含所有 html。
然后你可以给这个包装元素一个特定的宽度 (960px) 是很常见的，也可以像这样将它居中到屏幕上:
<html>
<head>
<style type="text/css">
#wrapper{
margin:0 auto;
width: 960px;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- ALL YOUR HTML HERE -->
</div>
</body>
</html>
关于html - 导航和子导航在不同屏幕上的位置不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9706970/