相对于徽标图像的大小和垂直中心导航栏项

时间：2018-05-05 13:32:21

标签： css css3

我正在尝试在水平导航栏的左侧调整导航栏徽标的大小，然后让其余的导航栏项目占用相同的垂直空间并在空间中垂直居中。导航栏项目当前不使用完整的垂直空间。我尝试过的每个sizing属性都会产生另一个问题。感谢您的帮助。

注意：不能使用bootstrap。希望我能。

/****************************************/
/* Fixed top navbar with dropdowns      */
/****************************************/
.m-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

/*.m-navbar li {
    float: left;
}*/

.m-navbar-right {
	float: right;
}
.m-navbar-left {
	float: left;
}

.m-navbar li a, .m-menu-form {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border: none;
    font-size: 100%;
    font-family: "Lato", sans-serif; 
}

.m-navbar li a:hover:not(.active), .m-dropdown:hover, .m-menu-form:hover {
    /*background-color: #ddd;*/
    background-color: #9dd0f0;
}

.m-navbar-logo-img {
	padding: 3px 0px 4px 4px;
	width: auto;
	max-height: 33px;
	position: relative;
}

.m-navbar li a.active {
    color: white;
    background-color: #00719c;
}

.m-navbar li.m-dropdown {
	display: inline-block;
}

.m-dropdown-content {
	display: none;
<!DOCTYPE html>
<html>
<head>
	<meta charset="ISO-8859-1">
	<link rel="stylesheet" href="navbar.css">
	<title>Navbar Problem</title>
</head>
<body>
 <div class="m-outer">
 	<div class="m-fixed-header">
		<div class="m-navbar">
		    <ul>
			  <li class="m-navbar-left"><a href="#"><img class="m-navbar-logo-img" src="bugicon.png"></img></a></li>
			  <li class="m-navbar-left">
				  <form name="idForm" method="post" action="">
				      <input type="submit" name="action" class="m-menu-form" value="Home">
				  </form>
		   	  </li>
			  <li class="m-dropdown m-navbar-left">
				  <a href="javascript:void(0)" class="m-dropbtn">Menu 1</a>
				  <div class="m-dropdown-content">
				  	<a href="#">Drop 1</a><br>
				  	<a href="#">Drop 2</a><br>
				  	<a href="#">Drop 3</a><br>
				  </div>
			  </li>
			  <li class="m-dropdown m-navbar-left">
				  <a href="javascript:void(0)" class="m-dropbtn">Menu 2</a>
				  <div class="m-dropdown-content">
				  	<a href="#">Drop 1</a><br>
				  	<a href="#">Drop 2</a><br>
				  	<a href="#">Drop 3</a><br>
			  		<a href="#">Drop 4</a><br>
	 				<a href="#">Drop 5</a><br>
				  </div>
			  </li>
			  <li class="m-navbar-right"><a href='#'>Logoff&nbsp;&nbsp;</a></li>
		    </ul>
		</div>
	</div>
</div>
	
</body>
</html>

1 个答案:

答案 0 :(得分：0)

你用display：flex;

试了吗？ 

/****************************************/
/* Fixed top navbar with dropdowns      */
/****************************************/
.m-navbar ul {
   list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
    display: flex;
    flex-shrink: 1;
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

/*.m-navbar li {
    float: left;
}*/

.m-navbar-right {
	float: right;
}
.m-navbar-left {
	float: left;
}

.m-navbar li a, .m-menu-form {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border: none;
    font-size: 100%;
    font-family: "Lato", sans-serif; 
}

.m-navbar li a:hover:not(.active), .m-dropdown:hover, .m-menu-form:hover {
    /*background-color: #ddd;*/
    background-color: #9dd0f0;
}

.m-navbar-logo-img {
	padding: 3px 0px 4px 4px;
	width: auto;
	max-height: 33px;
	position: relative;
}

.m-navbar li a.active {
    color: white;
    background-color: #00719c;
}

.m-navbar li.m-dropdown {
	display: inline-block;
}

.m-dropdown-content {
	display: none;}
<!DOCTYPE html>
<html>
<head>
	<meta charset="ISO-8859-1">
	<link rel="stylesheet" href="navbar.css">
	<title>Navbar Problem</title>
</head>
<body>
 <div class="m-outer">
 	<div class="m-fixed-header">
		<div class="m-navbar">
		    <ul>
			  <li class="m-navbar-left"><a href="#"><img class="m-navbar-logo-img" src="bugicon.png"></img></a></li>
			  <li class="m-navbar-left">
				  <form name="idForm" method="post" action="">
				      <input type="submit" name="action" class="m-menu-form" value="Home">
				  </form>
		   	  </li>
			  <li class="m-dropdown m-navbar-left">
				  <a href="javascript:void(0)" class="m-dropbtn">Menu 1</a>
				  <div class="m-dropdown-content">
				  	<a href="#">Drop 1</a><br>
				  	<a href="#">Drop 2</a><br>
				  	<a href="#">Drop 3</a><br>
				  </div>
			  </li>
			  <li class="m-dropdown m-navbar-left">
				  <a href="javascript:void(0)" class="m-dropbtn">Menu 2</a>
				  <div class="m-dropdown-content">
				  	<a href="#">Drop 1</a><br>
				  	<a href="#">Drop 2</a><br>
				  	<a href="#">Drop 3</a><br>
			  		<a href="#">Drop 4</a><br>
	 				<a href="#">Drop 5</a><br>
				  </div>
			  </li>
			  <li class="m-navbar-right"><a href='#'>Logoff&nbsp;&nbsp;</a></li>
		    </ul>
		</div>
	</div>
</div>
	
</body>
</html>

相关问题
最新问题