html - 下拉菜单文本忽略行，不继承字体大小-6ren

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

转载作者：行者123 更新时间：2023-11-28 07:38:11

24

4

我正在构建一个简单的导航栏，嵌套 <ul>在 div 中列出.

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

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

出于某种原因，悬停时显示的下拉菜单有更大的文本，并且文本比字体行大(重叠)。我以为下拉菜单只会从父元素继承 font-style，但显然不是这样。

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

我不知道该尝试什么以及我做错了什么。下面的片段

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;
}

<!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>

最佳答案

正如您在以下资源中所读到的，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元素的padding，如下:

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

Resource: Chapter 4: The amazing em unit

When used to specify font sizes, the em unit refers to the font size of the parent element. So, in the example above, the font size of the h1 element is set to be two times the font size of the body element. In order to find what the font size of the h1 element will be, we need to know the font size of body . Since this isn't specified in the the style sheet, the browser will have to find it from somewhere else - a good place to look is in the user's preferences. So, if the user has set the normal font size to be 10 points, the size of the h1 element will be 20 points. This will make document headlines stand out relative to the the surrounding text. Therefore: always use ems to set font sizes.

关于html - 下拉菜单文本忽略行，不继承字体大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31111866/

24

4

0

文章推荐： javascript - 使用 jquery 垂直翻转

文章推荐： swift - 添加多个 UI 元素并一起约束

文章推荐： javascript - D3，x轴上的日期，数据为日期的宽度

继承
我使用的是 PHP 5.3 稳定版，有时会遇到非常不一致的行为。据我所知，在继承中，父类(super class)中的所有属性和方法(私有(private)、公共(public)和 protected
继承
所以我一直在努力寻找正确的方法来让应该非常简单的继承发挥作用(以我想要的方式 ;))，但我失败得很惨。考虑一下: class Parent { public String name = "Pare
继承
给定这些类: class Father { public Father getMe() { return this; } } class Child extends Father {
继承
为什么最后打印“I'm a Child Class”。？ public class Parent { String parentString; public Parent()
继承
我知道有很多类似的问题对此有很多很好的答案。我试着看看经典的继承方法，或者那些闭包方法等。不知何故，我认为它们对我来说或多或少是“hack”方法，因为它并不是 javascript 设计的真正目的。
WinForms 继承
我已经使用表单继承有一段时间了，但没有对以下方法进行太多研究。只需创建一个新类而不是表单并从现有表单继承并根据需要将所需控件转换为 protected 。 Visual Studio 2010 设计器
C++——继承
我原以为下面的代码片段会产生编译错误，因为派生类不会有我试图在 pub_fun() 中访问的 priv_var。但是它编译了，我得到了下面提到的输出。有人可以解释这背后的理论吗？ class base
java:继承
继承的替代方案有哪些？最佳答案 Effective Java:优先考虑组合而不是继承。 (这实际上也来自《四人帮》)。他提出的情况是，如果扩展类没有明确设计为继承，继承可能会导致许多不恰当的副作用
JavaScript - 继承
我有2个类别:动物( parent )和狗(动物的“ child ”)，当我创建一个 Animal 对象并尝试提醒该动物的名称时，我得到了 undefined ，而不是她的真名。为什么？(抱歉重复发帖
JavaScript:继承
我试图做继承，但没想到this.array会像静态成员一样。我怎样才能让它成为“ protected /公开的”: function A() { this.array = []; } func
java在泛型方法中使用this(继承)
在创建在父类中使用的 lambda 时，我试图访问子类方法和字段。代码更容易解释: class Parent { List> processors; private void do
JavaScript 继承
如果我有一个对象，我想从“ super 对象”“继承”方法以确保一致性。它们将是混合变量。修订 ParentObj = function() { var self = this; t
Java - 继承
class Base { int x=1; void show() { System.out.println(x); } } class Chi
JavaScript 继承
目前我正在尝试几种不同的 Javascript 继承方法。我有以下代码: (“借用”自 http://www.kevlindev.com/tutorials/javascript/inheritanc
Javascript 继承 : How to
我在 .popin-foto 元素中打开一个 popin。当我尝试在同一元素中打开子类 popin 时，它不起作用。代码这是 parent function Popin(container, ti
前置自增运算符的C++继承
我有以下两个类: class MyClass { friend ostream& operatorvalue +=1; return *this; } 现在
CSS 继承
有没有办法完全忽略导入到 html 文件中的 header 中的 CSS 文件？我希望一个页面拥有自己独立的 CSS，而不是从任何其他 CSS 源继承。最佳答案您可以在本地样式表中使用 !imp
JavaScript 继承
Douglas Crockford似乎喜欢下面的继承方式: if (typeof Object.create !== 'function') { Object.create = functio
C#继承
假设我有以下代码: interface ISomeInterface { void DoSomething(); void A(); void B(); } public
链表的C++继承
class LinkedList{ public: int data; LinkedList *next; }; class NewLinkedList: public Lin

首页

博学

6Ren·AI

商城

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