时间戳

首页 > 解决方案 > 带有两个图像超链接的 HTML 导航栏

html - 带有两个图像超链接的 HTML 导航栏

问题描述

我一直在尝试创建一个只有两个图像（超链接和透明）的响应式导航栏，但我似乎无法正确格式化。我希望它看起来的方式是：

基本理念

我最接近的是这段代码：

HTML：

<head>
    <div id="outerdiv" class="navbar-fixed-top">
         <a href="index.php"><img id="image1" src="image1.png"  alt="Find"/></a>
         <a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
    </div>
</head>

CSS：

 <style>
    img{
        display:inline-block;
        border: 2px solid black;
        background-color:#499FE2;    
    }
    img:hover{
        background-color: #91BCEE;
    }

    #image1{
        width:60%;
        float:left;
    }

    #image2{
       width:40%;
       float:left;
    }

    #outerdiv{
       background-color: #black ;
    }

    a{
        display: block;
    }
</style>

我遇到的主要问题是我无法弄清楚在哪里实现填充，以便它将两个图像分开并包围它们。

标签： htmlcssnavbarnav

解决方案

首先，您需要将 HTML 代码清理为有效的 HTML，以便您的 CSS 选择器能够将样式应用于 DOM 中的元素。从您的 HMTL 代码中删除反斜杠以提供此信息；

<head>
<div id="outerdiv" class="navbar-fixed-top">
     <a href="index.php"><img id="image1" src="image1.png"  alt="Find"/></a>
     <a href="add.php" > <img id="image2"   src="image2.png" alt="Add"/></a>
</div>
</head>

为图像添加 -4px 的左边距以抵消边框使用的空间（这可以防止第二个图像进入下一行，因为它们占据了整个页面宽度的 60% + 40%，但图像的右 + 左边框占用 4 像素）。

还添加显示：块；属性到“#outerdiv”选择器，并将“a”选择器的显示属性值更改为内联。

img{
    display:inline-block;
    border: 2px solid black;
    background-color:#499FE2;
    margin-left:-4px;
}
img:hover{
    background-color: #91BCEE;
}

#image1{
    width:60%;
    float:left;
}

#image2{
   width:40%;
   float:left;
}

#outerdiv{
   background-color:black;
   display: block;
}

a{
    display: inline;
}

见工作片段

 img{
        display:inline-block;
        border: 2px solid black;
        background-color:#499FE2;
        margin-left:-4px;
    }
    img:hover{
        background-color: #91BCEE;
    }

    #image1{
        width:60%;
        float:left;
    }

    #image2{
       width:40%;
       float:left;
    }

    #outerdiv{
       background-color:black;
       display: block;
    }

    a{
        display: inline;
    }
<head>
    <div id="outerdiv" class="navbar-fixed-top">
         <a href="index.php"><img id="image1" src="image1.png"  alt="Find"/></a>
         <a href="add.php" > <img id="image2"   src="image2.png" alt="Add"/></a>
    </div>
</head>

推荐阅读