html - 为什么我的导航栏和横幅之间有空白？-6ren

html - 为什么我的导航栏和横幅之间有空白？

转载作者：行者123 更新时间：2023-11-28 16:10:39

25

4

出于某种原因，我将横幅和导航栏的边距设置为 0，但它们之间仍然有一个空格。我怎样才能解决这个问题？

CSS

.body
{
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
margin-bottom: 100px;
}




#page{
    width: 1000px;
    margin-left: 0px;
    margin-right: 0px;
}

.li_nav
{
float: left;
display:inline-block;
}

.nav 
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; 
min-width: 1350px;  
}

a:link, a:visited 
{
display:inline-block;
width: 182.7px;
padding-top: 12px;
padding-right: 5px;
padding-bottom: 12px;
padding-left: 5px;
font-weight: bold;
color: #FFFFFF;
background-color: #990000;
text-align: center;
text-decoration: none;
font-family: 'proxima-nova', sans-serif;
}

a:hover, a:active 
{
background-color: #B20000;
}

.body
{
height: 1350px;
}

.main_header
{
text-align: center;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 5px;
font-family: 'proxima-nova', sans-serif;
}

.main_body
{
padding-bottom: 100px;
}

.Team_Description 
{
font-size: 150%;
font-family: 'proxima-nova', sans-serif;
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index_style.css">
<title>Team 3774 Homepage</title>
</head>
<body>

<div id="page">
<div class="Banner">
<img src="/Images/Banner.png" height="200" width="1350">
</div>

<div class="navbar">
<ul class="nav">
  <li><a class="li_nav" href="/Home">Home</a></li>
  <li><a class="li_nav" href="/Team Bio">Team Bio</a></li>
  <li><a class="li_nav" href="/Our Robot">Our Robot</a></li>
  <li><a class="li_nav" href="/Our Coach">Our Coach</a></li>
  <li><a class="li_nav" href="/Gallery">Gallery</a></li>
  <li><a class="li_nav" href="/Outreach">Outreach</a></li>
  <li><a class="li_nav" href="/Youtube">Youtube</a></li>
</ul>
</div>
</div>

<div class="body">
<h1 class="main_header">Welcome to Robotics Team 3774!</h1>
<div class="main_body">
<p class="Team_Description">Hive Voltage 3774 is the Senior 
(and Junior) 
Engineering Team at Bayonne High School. The team 
is a part of the Senior Engineering class available 
at Bayonne High School. This team has the most experienced
 students for FTC. Many of them are highly capable students 
 who had done various stem activities. We plan on learning 
 several aspects of engineering this season but we also intend to
 have fun.
 Our main goal however is to grow as a team. We plan to grow 
 as individuals and to collaborate as a unit or a team.
 Also, we plan to expose our community to the wonderful 
 applications of robotics, and to excel in many parts of real
 engineering and real world applications. Hence we are, 
 HIVE VOLTAGE 3774. #Hivevoltage #Gobees</p>
</div>
</div>
</body>
</html>

我正在为我的高中机器人团队构建网站。该网站是 robothive3774.com

最佳答案

因为内联元素(在您的情况下是横幅中的图像)的默认垂直对齐方式是基线，而您想要顶部:

.Banner img {
    vertical-align:top;
}

jsFiddle example

关于html - 为什么我的导航栏和横幅之间有空白？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26003602/

25

4

0

文章推荐： jquery - 如何将背景图像定位在容器边缘的中心

文章推荐： html - 做CSS圈子最简单通用的方法是什么？

文章推荐： javascript - 两个全屏视频背景并排在一个窗口中

显示透明背景的 Adsense 横幅
相信我，我在 Adsense 论坛(西类牙语和英语)中问过这个问题，还检查了以下资源和问题: 1 - 2 - 3 - 4 我有一个实际与 AdMob 配合使用的 AdSense 帐户。我们在 Andr
youtube - 单击播放按钮时如何将标题扩展到视频的标题/横幅？
我想创建一个标题图像/横幅，单击播放图像后，它会垂直扩展以播放YouTube上托管的视频。此页面准确显示了我要执行的操作: blendedlearningnow.com/about。我不确定这是否
Jquery slider 横幅
这里有一个漂亮的 Flash 横幅:http://osc4.template-help.com/drupal_30779/ 。我想知道是否有一个 jquery 库可以让我达到同样的效果。 (点击、滑动
永远延伸的 HTML 横幅
我在一个宽度为 960px 的容器 div 中有一个标题。页眉包含几个完全位于页面中央的 Logo 。我想有一个背景渐变永远延伸到标题后面。出现问题是因为渐变横幅受限于 960px 的宽度。我尝试将横
php - 创建用户可以自定义的页眉/横幅
有谁知道是否可以创建一个功能标题生成器，使用户能够使用颜色、图像和文本对其进行自定义？然后保存并添加到他们的网站？ I have created a feature banner demo here
从左向右延伸的 css 横幅
通常在我的网页中，我会有一个 #wrapper DIV 来包装整个页面并设置为如下内容: #wrap {position: relative; width: 1000px; display: bloc
带有叠加图像和文本的 html 横幅
我正在寻找一种动态创建可以放置在其他页面上的横幅的方法。横幅包含一个背景图像、两个重叠图像和两个位于该背景图像之上的文本标签。是不是只能用绝对定位来实现元素的叠加？我如何确保横幅本身相对放置在集成页
Jquery 横幅 slider
我有一个 900 x 80 的标题区域，以及一个适合该区域左上角的 175 x 75 Logo 。我想要做的是使用 jquery 将 Logo 从标题区域的右侧移动到左侧，然后卡住并设置在左侧。我知道
Admob 横幅，如何仅在主页上显示
我成功地在页脚上显示智能横幅，然后将其处理掉。我的问题是显示在应用程序的所有页面上。我的问题是:如何只显示在一页上？ @override void initState() { super.i
flash - 如何添加链接到 Flash 横幅
我主要是一名开发人员，不知道使用 Adobe Flash CS4。是否有一种简单的方法可以将链接添加到 Flash 横幅。我有 .flv 文件，其中包含库中的一些项目和两层。请给我一步一步的指示
web - 在响应式布局中处理 Adsense 横幅
如何在响应式布局中处理 Adsense 横幅？据我从 Adsense TOS 中了解到，我几乎不允许在客户端对横幅做任何事情，所以我不能在客户端将横幅切换到较小的分辨率，如果它是低分辨率的. 似乎我
java - 如何在Java中使用v3数据Api插入YouTube channel 横幅？
ChannelBannerResource chBannerResource = new ChannelBannerResource(); chBannerResource.setKind("yout
javascript - 横幅 javascript 变得更快
下面附有代码，我正在尝试使用 javascript 制作横幅。使用 setInterval 我做了一个循环，一个接一个地显示 3 个 div。我遇到的问题是，当循环结束时，有一个按钮显示“返回”，
java - 在哪里放置 AdMob 横幅？
我即将在拥有 1000 个活跃用户的应用程序中实现 AdMob 横幅。我有 1 个 main Activity，其中包含 5 个 fragment，每个 fragment 代表不同的选项卡。我应该
java - 我无法在我的应用程序中显示 AdMob 横幅
我尝试在我的应用中实现 AdMob 横幅，但它没有显示。我已经使用了横幅，并且总是使用相同的方式..我有一个带有 View 的 FrameLayout 。此 FrameLayout 位于 Linear
java - Mobclix 横幅 NullPointerException？
我在我的第一款游戏中使用 Andengine 与 Mobclix 结合使用，每当我尝试运行该应用程序时，我都会在 LogCat 中收到巨大错误。我到处都搜索过，但似乎找不到答案。 FATAL EXCE
javascript - 在更改任何表单元素后显示 div 横幅
JS: document.getElementsByTagName("input, select, textarea, option, optgroup, fieldset, label").onch
android - 在页面底部添加一个不重叠内容的 Admob 横幅
我想在页面底部安装一个横幅，但它与主屏幕的内容重叠。在主屏幕中有很多内容并且有滚动。有人知道为什么吗？谢谢。 XML android:id="
java - 布局顶部的 Admob 横幅
我想在屏幕顶部显示横幅，但是有问题。在我的代码中(这不是我的代码，因为我正在学习过程中)我有两个选择。在屏幕底部的屏幕下方或上方显示横幅。 public void showBanner(fin
android - 在屏幕底部显示 AdMob 横幅
我的 AdMob 横幅显示在屏幕顶部而不是底部。这是我的代码: adView = new AdView(mSingleton); adView.setAdSize(AdSize.SMART_BANN

首页

博学

6Ren·AI

商城

html - 为什么我的导航栏和横幅之间有空白？