html - 减少填充，初学者 CSS-6ren

html - 减少填充，初学者 CSS

转载作者：太空宇宙更新时间：2023-11-04 02:40:02

25

4

我希望我正在处理的页面顶部的导航按钮(请参阅帖子末尾的链接)更像下图，即它们应该显示为选项卡。我已经尝试更改页面上几个元素的填充和边距，但我还没有成功。如何消除“主要”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>

最佳答案

额外填充的主要原因是 #first <h1>顶部有自动填充(h1 的默认样式)，还有 <ul>下面有填充。删除这两个作品。

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;
}

<!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>

关于html - 减少填充，初学者 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34935248/

25

4

0

文章推荐： node.js - 使用 Node.js 跟踪 GPS

文章推荐： python - 优先合并 2 列

文章推荐： multithreading - 为什么 Node 空闲时有两个线程？

haskell 初学者
我不明白为什么我会从 GHCi 得到以下回复。不是Maybe构造函数？ Prelude> :t Maybe :1:1: Not in scope: data constructor `Maybe' P
PHP登录认证问题(初学者)
场景是我在此网站上有不同的访问级别，我有一个适用于所有有效用户的简单登录流程，但是我现在尝试分隔不同的用户以实现对页面的不同访问。这是我页面开头的代码: // CHECKS IF THE USER
Javascript简单数学我不明白(初学者)
我的任务是:写下数字1-100。如果该数字可以被 3 整除，则将其写入数字“它可以被 3 整除”旁边的控制台。如果数字是 5，也将其写入数字旁边的控制台“它可以被 5 整除”，如果它不能被 3 整除，
Clojure元编程动态选择记录(初学者!)
我有一堆实现协议(protocol) P 的记录 (A B C)。我想编写一个方法，该方法将选择一种记录类型，构造它，然后调用它的方法。例如，如果我有一个记录列表(def types '(A B
JAVA数组与对象错误问题(初学者)
我的任务是编写一个程序，根据以下三个因素来预测您的年度燃料使用量汽车加油。我必须使用两个单独的类。这是我的第一个类，名为 AnnualFuelUse。 public class AnnualFuelU
javascript - 初学者
我是 JavaScript 新手。我已经通过 Learning JavaScript (o'reilly) 完成了我的工作，但我只是想制作我的第一个 JavaScript。我认为最好从事我感兴趣的事
python绘制一维波动方程(初学者)
我真的刚刚开始学习如何用 Python 编写代码。我有兴趣如何重现 u[x,t] 矩阵。我尝试了 return u，它抛出了一个错误。如果此代码中 for 循环的位置正确并正常运行。最重要的是，
Javascript语法困惑[初学者]？
我不明白 view("") 在作为 Model 对象一部分的以下 javascript 方法中的作用: addView: function(view) { this.views
Python模块错误-初学者
所以我正在尝试将 AppKit 导入到我的 python 项目中。我正在使用 pyCharm，但每次我尝试导入时，都会收到以下错误消息: You are using pip version 6.0.8
Java 初学者
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
Hadoop 初学者
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
Python 初学者- 一个程序只使用多个函数有什么问题吗？
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 2 年前。 Improve
prolog - PROLOG 初学者
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Perl:初学者。我应该使用哪种数据结构？
好吧，不知道在哪里问这个，但我是一个初学者程序员，使用 Perl。我需要创建一个数组数组，但我不确定使用数组/哈希引用、哈希数组或数组哈希等是否更好。我需要一组匹配项:@totalmatches 每
PHP 身份验证(初学者)
我最近开始学习 PHP。我做了一个基本的网站，基本上想给它密码。如果有人能告诉我为什么这不起作用，我将不胜感激。我知道它不起作用，因为我已经尝试过了；我只是不明白为什么。 ... REST OF W
C 初学者，指针和取消引用
我试图理解 C 中的整个指针和取消引用。我几乎明白了，但遇到了非常简单的代码，结果我不明白: char *ptr = "Characters"; char val = *ptr; char *chrp
python 初学者 - 构建具有组约束的情侣列表
首先，我有这个列表(在练习中建议): Members = [('Tessa','G1'),('Evan','G2'),('Tom','G3'), ('Mia','G3'),('Claire','G3'
python - 根据字典对列表进行排序(初学者)
我有以下列表: listofanimals = ['Dog', 'Cat', 'Frog', 'Tiger', 'Sheep', 'Lion'] 我想根据字典对这个列表进行排序: score_card
php - 初学者...对同一函数中的同名变量感到困惑
1 userID = floatval($userID); 13 } else { 14 $this->userID = floatval(
R .Internal 初学者
我是 R 新手，遇到了一段我不理解的代码。更具体地说，我想知道 .Internal做。这是我尝试转换为 Matlab 的示例: dunif 我想知道.Internal和做。非常感谢您，西蒙最

首页

博学

6Ren·AI

商城

html - 减少填充，初学者 CSS