Question

正如您在本页http://arielnavarro.esy.es/中所观察到的那样，我用来训练，我有一个小问题，我不喜欢。正如您所看到的，导航栏比按钮大，只有在我添加了facebook徽标和linkedin徽标时才会发生。我试着玩两个图像的高度，但我最终导航栏的saize也改变了。

以下是来自css和html的代码

@charset "utf-8";
.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li {
    float: left;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

li a.active { 
    color: white;
    background-color: #4CAF50;
}

#fb {
	float:right;
	margin: 0 auto;
	z-index: 2;
	padding-right:15px;
}
#linkedin {
	float:right;
	z-index:2;
}

<!DOCTYPE html>
	<head>
		<title>Documento sin título</title>
    	<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
 
	<body>
		<div>
	  		<ul class="navbar">
  				<li id="home"><a class="active" href="#home">Home</a></li>
  				<li id="quienes_soy"><a href="#quienes_soy">quienes soy</a></li>
  				<li id="contacto"><a href="#contacto">Contacto</a></li>
				<li id="about"><a href="#acerca_de">acerca de</a></li>
        		<a id="linkedin" target="_blank" href="https://www.linkedin.com/in/ariel-navarro-297062129/"><img src= "http://i.imgur.com/15FuoKO.png" height="45"></a>
  				<a id="fb" target="_blank" href="https://www.facebook.com/ariel.navarro.9655"><img src= "http://i.imgur.com/w3S3D0o.png" ></a>
        	</ul> 
        </div>
	</body>
</html>

谢谢大家：）

Answer 1

尝试将“导航栏”设为固定高度。这应该让你朝着正确的方向前进。

需要帮助将img装入一个每次都变大的div

1 个答案: