Question

我想将导航菜单栏的高度调整为37px（徽标的高度）这部分内容我想用文本调整图标，并将下拉菜单调整到导航栏和内容对齐图标文本

很抱歉，但我的css样式很难，我是初学者。

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function dropdownClick() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

/* Definimos la fuente personalizada para la web */

@font-face {
  font-family: Gotham-Light;
  src: url('../../assets/webfonts/Gotham-Light.ttf') format('truetype');
}
@font-face {
  font-family: Gotham-Medium;
  src: url('../../assets/webfonts/Gotham-Medium.ttf') format('truetype');
}
html {
  font-family: Gotham-Light;
  position: relative;
  min-height: 100%;
}
.optionMenu {
  font-family: Gotham-Medium;
}
body {
  margin: 0px;
}
/* Def. Navigation Bar */

nav {
  width: 100%;
  height: 37px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #dedee1;
}
li {
  float: left;
}
li a,
.dropbtn,
.img {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: #e0f2fd;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.iconimg {
  float: left;
}
.icontxt {
  margin-top: 4px;
}
.show {
  display: block;
}
.dropbtn i {
  float: left;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- NAVIGATION -->
<nav>
  <ul>
    <li>
      <img src="assets/images/brand-logo.png" />
    </li>
    <li class="optionMenu">
      <a href="#page1.html"><i class="material-icons" style="font-size: 30px">work</i> Page1</a>
    </li>
    <li class="optionMenu ">
      <a href="#page2.html"><i class="material-icons" style="font-size: 30px ">photo</i> Page2</a>
    </li>
    <li style="float:right " class="dropdown">
      <a class="dropbtn " onclick="dropdownClick()"><i class="material-icons " style="font-size: 30px ">face</i> Username</a>
      <div class="dropdown-content" id="myDropdown">
        <a href="#settings.html"><i class="material-icons">settings</i> settings</a>
        <a href="#change_pass.html "><i class="material-icons">lock</i>  change password</a>
        <a href="#logout.html"><i class="material-icons" style="font-size:18px">power_settings_new</i> log out</a>
      </div>
    </li>
  </ul>
</nav>

我尝试了很多变种，但我找不到解决方案。

Answer 1

根据我的理解，以下更改应该能够满足您的需求：

在此处删除填充（标签上的填充导致导航栏显得更大）

li a,
.dropbtn,
.img {
  display: inline-block;
  color: black;
  text-align: center;
  /* padding: 14px 16px; */
  text-decoration: none;
}

添加以下类样式：

.material-icons { 
  vertical-align: middle;

}

这会使你的文字和图标排成一行。

我认为这涵盖了你想要的东西？

Answer 2

请试试这个，

编辑CSS

@font-face {
  font-family: Gotham-Light;
  src: url('../../assets/webfonts/Gotham-Light.ttf') format('truetype');
}
@font-face {
  font-family: Gotham-Medium;
  src: url('../../assets/webfonts/Gotham-Medium.ttf') format('truetype');
}
html {
  font-family: Gotham-Light;
  position: relative;
  min-height: 100%;
}
.optionMenu {
  font-family: Gotham-Medium;
}
body {
  margin: 0px;
}
/* Def. Navigation Bar */

nav {
  width: 100%;
  height: 37px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */    /* removed */
  background-color: #dedee1;
}
li {
  float: left;
}
li a,
.dropbtn,
.img {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 4px 16px 3px 16px; /* edited */
  text-decoration: none;
  vertical-align: middle;  /* edited */
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: #e0f2fd;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 178px;  /* edited */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1; /* edited */
}
.iconimg {
  float: left;
}
.icontxt {
  margin-top: 4px;
}
.show {
  display: block;
}
.dropbtn i {
  /* float: left; */ /* removed */
}

/* Added new css style */
.material-icons{   
  vertical-align: middle !important;
}

已编辑的HTML代码段 -

<img height="37px" src="assets/images/brand-logo.png" />

我如何在导航菜单栏上固定高度px并对齐元素

2 个答案: