Question

嘿，我的下拉菜单在这里： https://i.gyazo.com/642cdb023365cd8e7e086d53551fc385.png

我无法将下拉文本放在一起，我尝试在content a {}上添加填充但似乎无法正常工作

我还包括html标记以及我用于导航栏的其他样式。

nav {
    padding-left: 5px
}

nav .main-nav {
	height: 80px;
	width: 100%;
	margin-top: 64px;
    background: url(../images/navHeader.png) no-repeat top;
    position: relative
}

nav .main-nav ul {
    width: 360px;
    height: 80px;
	margin-top: 2px;
    padding: 0;
    list-style-type: none
}

nav .main-nav ul a,
nav .main-nav ul li {
    display: inline-block;
    width: 115px;
    line-height: 80px;
    height: 80px
		
}

nav .main-nav ul a {
    text-align: center;
    font-weight: 750;
    font-size: 15px;
    color: #84827d;
    text-shadow: 1px 1px 1px #000;
    text-transform: uppercase;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

nav .main-nav ul a:hover {
    text-decoration: none;
    color: #7289da
}
nav .main-nav li .dropdown {
    }
    nav .main-nav .dropdown-content {
        position: absolute;
	    display: none;
	    float: left;
	    z-index: 10;
	    -webkit-box-shadow: 0 3px 5px 0 #999;
	-moz-box-shadow: 0 3px 5px 0 #999;
	box-shadow: 0 3px 5px 0 #999;
	border: 1px solid #CCC;
	background: #3A4FC5;
	color: #656161;
	opacity: .8;
	min-width: 10%;
	top: 60px;
    }

    nav .main-nav .dropdown-content a {
    color: black;
    text-decoration: none;
    display: block;
    text-align: center;
    }
    nav .main-nav .dropdown-content a:hover {
    background-color: #3A4FC5
    }

    nav .main-nav .dropdown:hover .dropdown-content {
    display: inline-block;
    }

<nav>
  <div class="main-nav">
    <ul class="left">
      <li class="dropdown"><a href="#">Home</a>
        <div class="dropdown-content">
          <a href="#">Third</a>
          <a href="#">Third Link</a>
          <a href="#">Third Link 3</a>
        </div>
      </li>
      <li><a href="#">Gods</a></li>
      <li><a href="#">Goddesses</a></li>
    </ul>
    <div class="play-now"></div>
    <ul class="right">
      <li><a href="#">Heroes</a></li>
      <li><a href="#">Myths</a></li>
      <li><a href="#">Beasts</a></li>
    </ul>
  </div>
</nav>

Answer 1

这是您的代码问题：

nav.main-nav ul a,
nav.main-nav ul li {
    display: inline-block;
    width: 115px;
    line-height: 80px;
    height: 80px;
}

您将line-height和height设置为固定大小。
如果您删除height并设置line-height: 2em;，那么它应该会好得多。

nav.main-nav ul a, 
nav.main-nav ul li {
    display: inline-block;
    width: 115px;
    line-height: 2em;
}

Answer 2

在tis规则中更改height和line-height：

nav .main-nav ul a,
nav .main-nav ul li {
  display: inline-block;
  width: 115px;
  line-height: 8px;
  height: 80px
}

这将解决您的问题 - 我在下面的代码段中将其更改为30像素：

nav {
  padding-left: 5px
}

nav .main-nav {
  height: 80px;
  width: 100%;
  margin-top: 64px;
  background: url(../images/navHeader.png) no-repeat top;
  position: relative
}

nav .main-nav ul {
  width: 360px;
  height: 80px;
  margin-top: 2px;
  padding: 0;
  list-style-type: none
}

nav .main-nav ul a,
nav .main-nav ul li {
  display: inline-block;
  width: 115px;
  line-height: 30px;
  height: 30px
}

nav .main-nav ul a {
  text-align: center;
  font-weight: 750;
  font-size: 15px;
  color: #84827d;
  text-shadow: 1px 1px 1px #000;
  text-transform: uppercase;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out
}

nav .main-nav ul a:hover {
  text-decoration: none;
  color: #7289da
}

nav .main-nav li .dropdown {}

nav .main-nav .dropdown-content {
  position: absolute;
  display: none;
  float: left;
  z-index: 10;
  -webkit-box-shadow: 0 3px 5px 0 #999;
  -moz-box-shadow: 0 3px 5px 0 #999;
  box-shadow: 0 3px 5px 0 #999;
  border: 1px solid #CCC;
  background: #3A4FC5;
  color: #656161;
  opacity: .8;
  min-width: 10%;
  top: 60px;
}

nav .main-nav .dropdown-content a {
  color: black;
  text-decoration: none;
  display: block;
  text-align: center;
}

nav .main-nav .dropdown-content a:hover {
  background-color: #3A4FC5
}

nav .main-nav .dropdown:hover .dropdown-content {
  display: inline-block;
}

<nav>
  <div class="main-nav">
    <ul class="left">
      <li class="dropdown"><a href="#">Home</a>
        <div class="dropdown-content">
          <a href="#">Third</a>
          <a href="#">Third Link</a>
          <a href="#">Third Link 3</a>
        </div>
      </li>
      <li><a href="#">Gods</a></li>
      <li><a href="#">Goddesses</a></li>
    </ul>
    <div class="play-now"></div>
    <ul class="right">
      <li><a href="#">Heroes</a></li>
      <li><a href="#">Myths</a></li>
      <li><a href="#">Beasts</a></li>
    </ul>
  </div>
</nav>

Answer 3

您的下拉式锚点继承以下规则中的属性：

nav .main-nav ul a,
nav .main-nav ul li {
    display: inline-block;
    width: 115px;
    line-height: 80px;
    height: 80px

}

您可以在下面提供更具体的规则：

nav .main-nav .dropdown-content a {
/* Set your height and line-height to whatever you want it to be to make the space between your items smaller */
  height: 40px;
  line-height: 40px
}

更简单的方法是将高度和行高设置为初始值并使用填充：

nav .main-nav .dropdown-content a {
  height: auto;
  line-height: initial;
  padding: 5px 0;
}

下拉菜单内容CSS填充

3 个答案: