Question

我希望我正在处理的页面顶部的导航按钮（请参阅帖子末尾的链接）更像下图，即它们应显示为标签。我已经尝试更改页面上几个元素的填充和边距，但我还没有运气。如何消除“主”div和导航栏之间的空间？

这是我用来生成页面的html和css，底部有一个JFiddle链接：

body {
	background-color: #090986;
}

#main {
	background-color: white;
	padding-left: .5em;
}

h1 {
	text-align: center;
	background-color: white;
}

#menu {
	text-align: center;
}

#menu li{
	display: inline;
	padding:4px 30px 0px 1px;
}

#menu a {
	color:#228;
	background:#bbb;
	padding:.1em .2em .2em .2em;
}

#menu li.current a{
	background: white;
}

abbr {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample Menu Page</title>
<link rel="stylesheet" title="Q1" href="style1.css" />
</head>
<body>
<h1>Sample Menu Page</h1>

<ul id="menu">
  <li><a href="one.html">Page One</a></li>
  <li class="current"><a href="two.html">Page Two</a></li>
  <li><a href="three.html">Page Three</a></li>
  <li><a href="four.html">Page Four</a></li>
  <li><a href="five.html">Page Five</a></li>
</ul>

<div id="main">
<h2 id="first">First Section</h2>
<p>This is the first part of the real content of the page.</p>
<p>This exercise is mostly about:</p>
<ul>
  <li><abbr title="Cascading StyleSheets">CSS</abbr></li>
  <li>geese</li>
</ul>
<p>Actually, there isn't so much about geese.  I just wanted to use a <code>&lt;ul&gt;</code> there.</p>

<h2 id="next">Next Section</h2>
<p>I'm really running out of stuff to say here. Oh well, fall back to old standards, I guess&hellip;</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</body>
</html>

Answer 1

尝试使用position属性仔细放置元素，尝试将其添加到#menu li：

#menu li{
  position: relative;
  top: 18px;
  display: inline;
  padding:4px 30px 0px 1px;
}

参考： http://www.w3schools.com/cssref/pr_class_position.asp

小提琴：https://jsfiddle.net/b60z4jks/

Answer 2

额外填充的主要原因是#first <h1>在顶部有自动填充（h1＆＃39; s的默认样式），<ul>下面有填充。删除这两个工作。

＆＃13;

body {
	background-color: #090986;
}

#main {
	background-color: white;
	padding-left: .5em;
}

h1 {
	text-align: center;
	background-color: white;
}

#main #first { 
    margin-top:0 
}

#menu {
	text-align: center;
    margin-bottom:0;
}

#menu li{
	display: inline;
	padding:4px 30px 0px 1px;
}

#menu a {
	color:#228;
	background:#bbb;
	padding:.1em .28em .05em .1em;
}

#menu li.current a{
	background: white;
}

abbr {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample Menu Page</title>
<link rel="stylesheet" title="Q1" href="style1.css" />
</head>
<body>
<h1>Sample Menu Page</h1>

<ul id="menu">
  <li><a href="one.html">Page One</a></li>
  <li class="current"><a href="two.html">Page Two</a></li>
  <li><a href="three.html">Page Three</a></li>
  <li><a href="four.html">Page Four</a></li>
  <li><a href="five.html">Page Five</a></li>
</ul>

<div id="main">
<h2 id="first">First Section</h2>
<p>This is the first part of the real content of the page.</p>
<p>This exercise is mostly about:</p>
<ul>
  <li><abbr title="Cascading StyleSheets">CSS</abbr></li>
  <li>geese</li>
</ul>
<p>Actually, there isn't so much about geese.  I just wanted to use a <code>&lt;ul&gt;</code> there.</p>

<h2 id="next">Next Section</h2>
<p>I'm really running out of stuff to say here. Oh well, fall back to old standards, I guess&hellip;</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</body>
</html>

＆＃13;

减少填充，初学者CSS

2 个答案: