Html CSS：文本被压缩。我怎样才能修好它？

我要为导航栏编程。问题是导航栏中的文本被压缩了。 我认为这是因为相对和绝对定位

这是导致此错误的代码：

div.menu{
浮动：对；
位置：相对位置；
}
分区菜单a{
文字装饰：无；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}

尝试以下操作：

div.menu ul li {
  display: inline-block;
  height:100%;
  padding: 0 1rem;
  text-align: center;

}

div.menu a {
  text-decoration: none;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  vertical-align: middle;
  line-height: normal;

}

---

为了便于阅读，我删除了你的一些评论

您希望删除

a

元素的

绝对位置。当您定位这些
绝对
时，父元素将不会像您预期的那样工作。您的问题在于，您将一个
标记放置在另一个
标记之上，并且父元素忽略该元素的大小（如果有意义的话）

然后要设置线条高度以便垂直对齐，如下所示：

div.menu a {
  text-decoration: none;
  vertical-align: middle;
  line-height: 5rem;
}

为了使其具有响应性，您将使用媒体查询来更改行高度


html{
字体大小：62.5%；
}
身体{
保证金：0；
字体系列：'Raleway'，'Lato'，'Helvetica Neue'，'Arial'，无衬线；
字体大小：1.6rem；
}
* {
框大小：边框框；
}
.标题导航{
宽度：100%；
身高：5雷姆；
背景色：#3d3f45；
字体大小：400；
}
/****开始：徽标****/
.收割台导航分区{
身高：100%；
显示：内联块；
位置：相对位置；
}
.收割台导航分区img{
高度：3雷姆；
宽度：自动；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
左：2rem；
}
分区菜单{
浮动：对；
位置：相对位置；
}
分区菜单{
身高：100%；
保证金：0；
}
分册菜单{
显示：内联块；
身高：100%；
填充：0 1rem；
}
分区菜单a{
文字装饰：无；
垂直对齐：中间对齐；
线高：5雷姆；
}
分区菜单a：链接{
颜色：#fff；
}
分区菜单a：已访问{
颜色：#fff；
}
分区菜单a：悬停，
分区菜单a：激活{
颜色：#E5；
}
.主动{
背景色：#a62c21；
}

家






我想知道的是，为什么不使用flex进行导航？这会让你对自己的行为有更多的控制权：


/*！styles.css
*颜色
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*
*Blau:#1f4ebc；
*邓克尔·格劳：3d3f45；
*地狱格劳：#e5；
*Rot:#a62c21
* 
*/
/*一般设置
========================================================================== */
html{
字体大小：62.5%；
}
身体{
保证金：0；
字体系列：'Raleway'，'Lato'，'Helvetica Neue'，'Arial'，无衬线；
字体大小：1.6rem；
}
* {
框大小：边框框；
}
/*航行
========================================================================== */
.标题导航{
显示器：flex；
证明内容：柔性端；
对齐项目：居中；
宽度：100%；
身高：5雷姆；
背景色：#3d3f45；
字体大小：400；
}
/*标志*/
.标志{
显示器：flex；
左：2rem；
}
.logo img{
高度：3雷姆；
}
/*菜单*/
分区菜单{
位置：相对位置；
显示器：flex；
宽度：继承；
身高：继承；
证明内容：柔性端；
}
分区菜单{
身高：继承；
保证金：0；
显示器：flex；
}
分册菜单{
显示器：flex；
对齐项目：居中；
对正内容：空间均匀；
身高：继承；
填充：0 1rem；
}
分区菜单a{
显示器：flex；
文字装饰：无；
}
分区菜单a：链接{
颜色：#fff；
}
分区菜单a：已访问{
颜色：#fff；
}
分区菜单a：悬停，
分区菜单a：激活{
颜色：#E5；
}
.主动{
背景色：#a62c21；
}

家






尝试增加应用于菜单链接列表的填充。
div.menu ul li{display:inline block；height:100%；padding:0 7rem；}以便您可以看到菜单项。我希望使用干净的解决方案。为什么要将行高设置为45px？可能存在重复情况@coder007，我只是在使用chrome开发工具，看起来高度不错。但是，我修改了我的答案。刷新后，您将看到它被设置为
5rem
，这与
标题导航相同，您知道为什么我的代码不起作用吗？因为我在代码中找不到错误。是的，我会更新我的答案。几分钟后刷新并阅读我所说的绝对定位。您知道为什么在这种情况下height（height:100%）属性不起作用吗？这是因为a元素是内联元素，因此不能更改高度吗？