CSS：文本被压缩。我该如何解决？

【问题标题】：CSS: Text is squeezed. How can I fix it?CSS：文本被压缩。我该如何解决？
【发布时间】：2018-04-12 00:56:19
【问题描述】：

我要编写一个导航栏。问题是导航栏中的文本被挤压。 我认为这是因为相对定位和绝对定位。

这是导致此错误的代码：

div.menu {
       float: right;
       position: relative;
    }

    div.menu a {
       text-decoration: none;
       position: absolute;
       top: 50%;
       transform: translateY (-50%);
    }

但我需要这段代码将 a 元素垂直居中。 如何使 a 元素垂直居中且文本不被挤在一起？

/*****************************************************************************************************************************************/
/************************************************************* styles.css ***************************************************************/
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:Colors *** */
/*****************************************************************************************************************************************/

/*
Blau: #1f4ebc;
Dunkel Grau: #3d3f45;
Hell Grau: #e5e5e5;
Rot: #a62c21
*/

/*****************************************************************************************************************************************/
/* *** END:Colors *** */
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:General Settings *** */
/*****************************************************************************************************************************************/

html{
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}

/*****************************************************************************************************************************************/
/* *** END:General Settings  *** */
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:Navigation *** */
/*****************************************************************************************************************************************/

.header-nav {
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
}

/* *** START: Logo *** */
.header-nav div {
  height:100%;
  display: inline-block;
  position: relative;
}

.header-nav div img {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:2rem;
}
/* *** END: Logo *** */

/* *** START: Menu *** */
div.menu {
  float:right;
  position:relative;
}

div.menu ul {
  height: 100%;
  margin: 0;
}

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

div.menu a {
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

div.menu a:link {
  color:#fff;
}

div.menu a:visited {
  color:#fff;
}

div.menu a:hover,
div.menu a:active {
  color:#e5e5e5;
}

.active {
  background-color: #a62c21;
}
/* *** END: Menu *** */


/*****************************************************************************************************************************************/
/* *** END:Navigation *** */
/*****************************************************************************************************************************************/
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  <body>

    <!-- **************************************************************************************************************************************************** -->
    <!-- ***   START: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->

    <nav class="header-nav">

      <!-- *** START: Logo *** -->
      <div class="logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      <!-- *** END: Logo *** -->

      <!-- *** START: Menu *** -->
      <div class="menu">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
        </ul>
      </div>
      <!-- *** END: Menu *** -->

    </nav>

    <!-- **************************************************************************************************************************************************** -->
    <!-- *** END: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->






  </body>
</html>

【问题讨论】：

  • 尝试增加应用于菜单链接列表的填充
  • div.menu ul li { display: inline-block;高度：100%；填充：0 7rem； } 这样你就可以看到菜单项了
  • 我想使用干净的解决方案。
  • Vertical Align Unordered List Nav Links?的可能重复

    • 标签： html css


    【解决方案1】：

    为了便于阅读，我删除了一些你的 cmets。

    您想删除a 元素的absolute 定位。当您定位这些 absolute 父元素时，它们的行为将不会像您预期的那样。您的问题在于您 absolute 将一个 a 标记放在另一个之上，并且父元素忽略该元素的大小，如果这有意义的话。

    然后你想设置行高以便垂直对齐，如下所示：

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

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

    html{
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}

.header-nav {
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
}

/* *** START: Logo *** */
.header-nav div {
  height:100%;
  display: inline-block;
  position: relative;
}

.header-nav div img {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:2rem;
}

div.menu {
  float:right;
  position:relative;
}

div.menu ul {
  height: 100%;
  margin: 0;
}

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

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

div.menu a:link {
  color:#fff;
}

div.menu a:visited {
  color:#fff;
}

div.menu a:hover,
div.menu a:active {
  color:#e5e5e5;
}

.active {
  background-color: #a62c21;
}
    <!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  <body>
    <nav class="header-nav">
      <div class="logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      
      <div class="menu">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
        </ul>
      </div>
    </nav>
  </body>
</html>

    【讨论】：

    • 为什么要设置行高为45px？
    • @coder007，我只是在使用 chrome 开发工具，看起来还不错。但是，我修改了我的答案。刷新你会看到设置为5rem，和.header-nav一样
    • 你知道吗，为什么我的代码不起作用？因为我在我的代码中找不到错误。
    • 是的，我会更新我的答案。几分钟后刷新并阅读我所说的关于absolute 定位的内容。
    • 你知道为什么 height (height:100%) 属性在这种情况下不起作用吗？这是因为 a 元素是内联元素，因此您不能更改高度吗？
    【解决方案2】：

    尝试以下方法：

    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;

}

    https://jsfiddle.net/FraserAllan/tcmgzg1s/8/

    【讨论】：

      【解决方案3】：

      我想知道的是为什么您不使用 flex 进行导航？它可以让您更好地控制您尝试做的事情：

      /*! styles.css

 * Colors
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *  Blau: #1f4ebc;
 *  Dunkel Grau: #3d3f45;
 *  Hell Grau: #e5e5e5;
 *  Rot: #a62c21
 * 
 */

/* General Settings
   ========================================================================== */
html{
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}

/* Navigation
   ========================================================================== */
.header-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
}

/* Logo */
.logo {
  display: flex;
  padding-left: 2rem;
}
.logo img {
  height: 3rem;
}

/* Menu */
div.menu {
  position:relative;
  display: flex;
  width: inherit;
  height: inherit;
  justify-content: flex-end;
}

div.menu ul {
  height: inherit;
  margin: 0;
  display: flex;
}

div.menu ul li {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: inherit;
  padding: 0 1rem;
}

div.menu a {
  display: flex;
  text-decoration: none;
}

div.menu a:link {
  color:#fff;
}

div.menu a:visited {
  color:#fff;
}

div.menu a:hover,
div.menu a:active {
  color:#e5e5e5;
}

.active {
  background-color: #a62c21;
}
      <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  
  <body>
    <!-- ***   START: Navigation *** -->
    <nav class="header-nav">
      <!-- *** START: Logo *** -->
      <div class="logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      <!-- *** END: Logo *** -->

      <!-- *** START: Menu *** -->
      <div class="menu">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
        </ul>
      </div>
      <!-- *** END: Menu *** -->
    </nav>
    <!-- *** END: Navigation *** -->
  </body>
</html>

      【讨论】：

        猜你喜欢
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode