带有两个图像超链接的 HTML 导航栏答案

【问题标题】：HTML navbar with two image hyperlinks带有两个图像超链接的 HTML 导航栏
【发布时间】：2018-11-20 03:57:22
【问题描述】：

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

第一张图片：宽度：60%
第二张图片：宽度：40%
两者高度相同
边框：2px 纯黑色（两个图像周围）
内边距：10 像素（两个图像周围和两个图像之间）
将导航栏保持在页面顶部
改变背景颜色的悬停效果

我最接近的是这段代码：

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>

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

【问题讨论】：

标签： html css navbar nav

【解决方案1】：

首先，您需要将 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%，但右 + 左图像的边框占用 4px）。

同时添加 display:block;属性到“#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;
}

查看工作 sn-p

 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>

【讨论】：

我忘了去掉代码中的反斜杠，但它们在那里是因为我使用的是 PHP，如果这引起了混淆，抱歉。您提供的代码没有在图像周围实现填充，这是我主要在努力解决的问题。不过感谢您的帮助！