Question

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

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

我最接近的是这段代码：

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>

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

Answer 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”选择器的display属性值更改为内联。

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>

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

1 个答案: