Question

我正在构建一个简单的导航栏，在<ul>内嵌套div列表。

在this tutorial之后，我尝试在导航栏中实现一个简单的css下拉菜单。

我正在使用reset.css和一个名为ionicons的自定义图标字体，但是我已经构建了没有它们的剪辑并重新创建了问题。

出于某种原因，悬停时显示的下拉列表文本较大，文本大于字体（重叠）。我认为下拉列表只会从父元素继承字体样式，但显然情况并非如此。

我尝试手动设置，但到目前为止还无法更改它。

我不知道该尝试什么以及我做错了什么。

下面的代码段

＆＃13;

html {
  font-family: 'Lato', sans-serif;
}
@media (min-width: 992px) {
  html {
    margin: 0 5%;
  }
}
/********************************
NAVBAR
********************************/

#navbar {
  background-color: #913D88;
}
@media (min-width: 992px) {
  #navbar {
    border-radius: 10px;
  }
}
#navbar ul {
  list-style: none;
}
#navbar ul li {
  padding: 0.5em;
  font-size: 1.1em;
  font-weight: 400;
  display: inline-block;
}
@media (min-width: 767px) {
  #navbar ul li {
    font-size: 1.2em;
  }
}
#navbar ul li a {
  padding: 0.3em;
  background-color: #913D88;
}
#navbar ul li a:visited,
#navbar ul li a:link {
  color: #fff;
  text-decoration: none;
}
#navbar ul li a:hover {
  color: #491f45;
  background-color: #c371ba;
}
#navbar ul .dropdown {
  position: relative;
}
#navbar ul .dropdown:hover > .drop-nav {
  display: block;
}
#navbar ul .dropdown .drop-nav {
  position: absolute;
  display: none;
}
#navbar ul .dropdown .drop-nav li {
  padding: 0.5em;
  display: block;
  background-color: #913D88;
  border-bottom: 1px solid black;
}
#navbar ul .dropdown .drop-nav a {
  padding: 0.3em;
  background-color: #913D88;
}
#navbar ul .dropdown .drop-nav a:visited,
#navbar ul .dropdown .drop-nav alink {
  color: #fff;
  text-decoration: none;
}
#navbar ul .dropdown .drop-nav a:hover {
  color: #491f45;
  background-color: #c371ba;
}

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>ZIC Knjižnica</title>

  <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900&amp;subset=latin-ext,latin' rel='stylesheet' type='text/css'>

</head>

<body>
  <div id="navbar">
    <ul>
      <li><a href="http://www.ijs.si/ijsw">IJS</a>
      </li>
      <li><a href="#">knjižnica</a>
      </li>
      <li class="dropdown"><a href="#">zaloga&nbsp;<span class="ion-arrow-down-b"></a>
        <ul class="drop-nav">
          <li><a href="#">novi izvodi tiskanih revij</a>
          </li>
          <li><a href="#">elektronske revije</a>
          </li>
          <li><a href="#">katalog</a>
          </li>
          <li><a href="#">baze podatkov</a>
          </li>
        </ul>
      </li>
      <li><a href="#">storitve&nbsp;<span class="ion-arrow-down-b"></a>
      </li>
      <li><a href="#">ENG</a>
      </li>
    </ul>
  </div>

</body>

</html>

＆＃13;

Answer 1

您可以通过在css中添加font-size属性来手动更改大小。

#navbar ul .dropdown .drop-nav a {
 padding: 0.3em;
  background-color: #913D88;
  font-size:10px;
 }

Answer 2

#navbar ul .dropdown .drop-nav a {
padding: 0.3em;
background-color: #913D88;
font-size: 20px;
}

您可以根据需要选择字体大小。你也可以使用第二种方法。

问题出现了bcoz你没有给父标签字体大小如果你给父母一个字体大小，那么孩子就会继承它。

#navbar ul li a {
padding: 0.3em;
background-color: #913D88;
font-size: 10px;
}

Answer 3

正如您可以在以下资源中阅读的那样，em单位是父值的相对值。因此，如果您的父元素包含font-size:1.1em且其子元素也为font-size:1.1em，则子元素的字体大小实际上为1.1*1.1*{Top parent font-size}，因此这些链接看起来更大。

解决方案1： 例如，如果我将#navbar ul li更改为px大小，则主链接和悬停链接的字体大小将相同。

#navbar ul li{
 font-size: 14px;
}

解决方案2： 将1em设置为字体大小到下拉列表中的链接。

#navbar ul .dropdown .drop-nav a{
 font-size: 1em;
}

关于行高毛刺，经过几次检查后，似乎是由于填充引起的毛刺。考虑重置dropdown li a元素的填充，如下所示：

#navbar ul .dropdown .drop-nav a{
 padding: 0;
}

<强> Resource: Chapter 4: The amazing em unit

当用于指定字体大小时，em单位指的是字体大小父元素。所以，在上面的例子中，字体大小 h1元素设置为body元素字体大小的两倍。为了找到h1元素的字体大小，我们需要知道身体的字体大小。因为这并没有在。中指定样式表，浏览器必须从其他地方找到它 - a 好看的地方是用户的偏好。所以，如果用户有将正常字体大小设置为10个点，即h1元素的大小将是20分。这将使文件标题脱颖而出相对于周围的文字。因此：始终使用ems进行设置字体大小。

下拉菜单文本忽略行，不会继承字体大小

3 个答案: