html - CSS - 无法正确定位导航链接高度并消除图像和主标题导航栏之间的额外边距-6ren

html - CSS - 无法正确定位导航链接高度并消除图像和主标题导航栏之间的额外边距

转载作者：行者123 更新时间：2023-11-28 07:55:28

25

4

所以我就是无法摆脱图像和导航栏之间的这个小额外边距。图像已设置为有 2% 的边距，但在图像和导航栏之间有更多的边距。并向导航链接添加填充，如 this tutorial在 28.00，这家伙设置了 margin: 0 auto;到导航列表。那对我不起作用。他将导航与 <ul> 结合使用和 <li>标签，我刚刚使用了<nav></nav>标签和 <a href="#">link</a>创建菜单。如何修复此边距错误并在菜单栏上上下移动链接？

CSS

body {
   background-image: url('lgrey.jpg');
   color: #000305;
   font-size: 90%; 
   font-family: Arial, Georgia, Verdana;
   line-height: 1.5;
   text-align: left;
}

.body {  
    margin: 0 auto;  
    width: 70%;
    clear: both;  
 }


.mainheader img {    
   width: 25%;
   height: auto;
   margin: 2% 0;
}

.mainheader nav {            
    background-color: dimgrey;
    height: 35px;
    border-radius: 4px;
   -moz-border-radius: 4px;   
   -webkit-border-radius: 4px; 
   margin: 0 auto;
 }

 .mainheader nav a {
    text-decoration: none;
    color: white;

   }

HTML

 <!DOCTYPE html>
 <html>
 <head>
    <title>responsive</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >

    </head>

   <header class="mainheader">
      <img src="furnitur2.jpg">

  <nav id="nav1"> 
      <a href="#">Avaleht</a>
      <a href="#">Meist</a>
      <a href="#">Asukoht</a>
      <a href="#">Teenused</a>
      <a href="#">Galerii</a>
      <a href="#">Kontakt</a>

      </nav>
     </header>

  <div class="maincontent">
    <div class="content">
       <article class="topcontent">
          <header>
            <h2><a href="#" title="First post">First Post</a></h2>
      </header>

      <footer>
        <p class="post-info">Selle posti autor on Otto Oliver Olgo</p>
      </footer>

      <content>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        </content>

         </article>
     </div>
   </div>

         <aside class="topsidebar">
           <article>
             <h3>Ülemine sidebar</h3>
                <p>Lorem ipsum ja nii edasi ma ei maleta mis ladina keelsed                                            
                </p>
              </article>     
           </aside>

       <aside class="bottomsidebar">
         <article>
            <h3>Ülemine sidebar</h3>
                <p>Lorem ipsum ja nii edasi ma ei maleta mis ladina keelsed                                            
                </p>
              </article>     
           </aside>

 <footer>
   <p>Copyright &copy: 2015 5toneface. All Rights Reserved</p>
 </footer>

 </body>

 </html>

最佳答案

图像标签与内容内联显示，似乎在其底部留出额外空间用于自然填充。

如果您的 img 标签更新为在 css 中显示为 block 元素，则空格消失:

.mainheader img {    
    width: 25%;
    margin: 2% 0 0;
    display: block;
 }

要调整您的链接，您可以:

.mainheader nav a {
    text-decoration: none;
    color: white;
    /* Set line-height to same as height will center text vertically */
    line-height: 35px; 
    /* inline block make the whole height clickable */
    display: inline-block;
    padding: 0 10px; 
}

关于html - CSS - 无法正确定位导航链接高度并消除图像和主标题导航栏之间的额外边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30135766/

25

4

0

文章推荐： javascript - 滚动时将 div 粘在屏幕顶部

文章推荐： html - Welcome#Index 中的 Ruby On Rails 语法错误

vba - 消除/更改循环以加快代码速度
我编写了一些运行速度很慢的 VBA 代码。我的代码中有一系列不同的循环。我知道循环并不总是处理数据的最有效方式，所以我认为它们是问题所在。我需要有关如何更改或消除循环的想法，以便加快代码的运行时间。
php - 消除？来自表单帖子上的查询字符串
我目前有一个网址:http://testsite.local/search/?q=findme一旦有人查询，我的搜索页面。我使用 mod_rewrite 重写了一些页面，想知道是否可以将其变成一个不错
mysql - 如何排除有重复的行？ (消除)
有人可以帮助我执行一个查询，其中查询的重复元素被删除 Select * from table where APPNAME = 'Ap1' or APPNAME= 'Ap2' 使用 DISTINCT 的
linux - 消除。从查找的结果
我正在尝试在 ubuntu 上使用以下命令在一个文件夹中查找文件并通过 FFmpeg 提供并输出到另一个文件夹。问题是当它处理输出路径和文件名时，它添加了一个 .像这样的路径:/conversions
r - 消除 R 中的重复项
这个问题在这里已经有了答案: How can I remove all duplicates so that NONE are left in a data frame? (3 个答案) 关闭 1
coq:消除 forall 量词
我想证明以下定理: Theorem Frobenius (A: Set) (q: Prop) (p: A -> Prop) : (q \/ forall x : A, p x) -> (foral
php - 消除 Excel 文档的缓存
我有一个 PHP 脚本，它只需要一些数据，将其分隔为制表符分隔格式，将其保存为 .xls 文件，然后为用户提供下载链接。大多数情况下运行良好，但有些人正在获取导出的 .xls 文件的缓存版本。我想
r - 消除 R 中的异常数据点
我有一个看起来有点像这个可重现代码的数据框，我想删除每列的异常值(在我们的例子中，数据点低于或高于平均值 2.5 个标准偏差)而不删除整个主题/行。 Subj mn + sd * 2.5) | (x
c++ - 消除 C++ 中多余的模板参数
我正在尝试编写一个实现 fmap 的演示。在 Haskell 中与 continuation ，我的代码如下所示: #include #include template using Callba
Highcharts 消除 xAxis 开始和第一个值之间的差距
在此 HighCharts例如，如何消除 xaxis 开始位置与 Jan 的刻度位置之间的差距。 http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-s
delphi - 消除 TSpeedButton 的闪烁
重现步骤: 将TPanel添加到新的VCL表单并设置Align = alClient。将 TSpeedButton 添加到面板，并将一些 bmp 图像分配给 Glyph 属性。 (可选，但更清晰:F
javascript - 消除 javascript 数组中的元素
我得到一个 JavaScript 数组，其中包含一定数量(未指定)的各种元素(字符串、数字、 bool 值)。我需要消除字符串和 bool 值。我应该如何处理它？我应该使用typeof吗？最佳答案
excel - 消除(可选)空格后的所有字符的公式
我正在寻找一个公式，可以消除字符串中空格后的空格和无用字符。我的第一 react 是执行以下操作:=LEFT(A1,FIND("",A1)) 它适用于所有有空格的情况但是如果单元格中没有空格，我的
javascript - 消除 Javascript 中的按键延迟
我有以下问题:我正在尝试编写一个 Javascript 游戏，并且 Angular 色由箭头键控制。问题是，当一个人按住按键时，在触发第一个按键和重复的按键之间存在短暂的延迟。另外，当按下“向右箭
PowerShell ForEach-Object 消除
让我们考虑一个集合的集合，以及需要在管道内对内部集合的每个元素执行的操作。为了简单起见，让它成为一个数组数组，操作简单的打印到屏幕上。为了表达我的问题，让我们还有一个元素不是集合的数组: $Arra
chapel - 消除 Chapel 构建中源文件的歧义
跟进this question关于包含源文件。我包括一个 Chapel 模块，其中包含一个名为 classes.chpl 的文件。，但我当前的项目也有一个 classes.chpl 。正确的消歧模式
assembly - 消除 Intel 语法中寄存器名称中标签的歧义
我想知道如何在英特尔语法中的某些指令中区分标签名称和寄存器名称。例如，call rdx通常意味着间接跳转，但是如果我们在同一个汇编文件中有一个标签rdx怎么办？我相信它可以被解释为直接跳转到 rdx
javascript - 消除 HTML 弹出窗口的延迟
据我了解，Chrome 会异步运行整个程序，这会导致我的扩展程序在单击后大约 2 秒后打开。有没有办法强制扩展程序显示带有“正在加载”消息的 html 页面，然后完成加载 javascript 并用内
sqlite - 消除 sqlite 中的唯一约束错误
我正在将 CSV 加载到 sqlite 数据库，如下所示: sqlite3 /path/to/output.db /dev/null 或者，您可以自己生成 SQL 命令，以便可以使用 INSERT 或
haskell - 消除 cabal 文件中的重复内容
我的 .cabal 文件的许多节中经常有类似的属性。例如 Library x ... ghc-options: -O2 -Wall -fno-warn-missing-s

首页

博学

6Ren·AI

商城

html - CSS - 无法正确定位导航链接高度并消除图像和主标题导航栏之间的额外边距