当我输入align-items：center时，我的svg图标消失了

编程问答 2022-08-15

问题描述

我正在尝试构建我的第一个导航栏，但是当我在ul，align-items:center上书写时，SVG图标就会消失。我一直在努力解决这个问题，但是找不到解决方案。如果有人可以帮助我，我将不胜感激。

body {
  background: white;
  color: black;
  font-family: 'Source Sans Pro',sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

body::-webkit-scrollbar {
  width: 0.25rem;
}

body::-webkit-scrollbar-track {
  background: #1e1e24;
}

body::-webkit-scrollbar-thumb {
  background: #6649b8;
}

main {
  margin-left: 8rem;
  padding: 1rem;
}

.navbar {
  width: 8rem;
  height: 200vh;
  position: fixed;
  background: rgba(0,300,200,0.80);
}

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  width: 50px;
  position: fixed;
  height: 100%;
  line-height: 100px;
  flex-direction: column;
  align-items: center;
}

li:first-child {
  padding: 7px;
}

li:last-child {
  margin-top: 560px;
}
<body>
  <nav class="navbar">
    <ul class="navbar-ul">
      <li class="navbar-li">
        <a href="#" class="nav-link">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37.33 64"><defs><style>.cls-1{fill:#35353d;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M32,0H5.33A5.33,5.33,5.33V58.67A5.33,64H32a5.33,5.33-5.33V5.33A5.33,32,0ZM5.33,58.67V5.33H32V58.67Z"/><path class="cls-1" d="M25.36,8H12a1.34,1.34,2.67H25.36a1.34,0-2.67Z"/><circle class="cls-1" cx="18.64" cy="53.33" r="2.67"/></g></g></svg>
        </a>
      </li>

      <li class="navbar-li">
        <a href="#" class="nav-link">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.99 64"><defs><style>.cls-1{fill:#35353d;}</style></defs><title>Asset 13</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M47.09,19.72a23.38,23.38,0-46.19,84.16,24.55,46.19,0A84.16,47.09,19.72ZM6.18,20.5a18.05,18.05,1,35.64,79.22,.37,19.58c-.09,0-.17,0-.26,0a64.35,64.35,1-35.87,0c-.09,0A78.73,78.73,6.18,20.5ZM24,58.67A18.08,18.08,6.68,45.75,69.76,24,48a69.75,69.75,17.31-2.24A18.06,18.06,58.67Z"/><path class="cls-1" d="M24,29.33a2.66,2.66,2.66-2.66V16a2.67,2.67,0-5.33,0V26.67A2.66,29.33Z"/></g></g></svg>
        </a>
      </li>

      <li class="navbar-li">
        <a href="#" class="nav-link">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 54.61"><defs><style>.cls-1{fill:#35353d;}</style></defs><title>Asset 23</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M32,0A32,9.39,54.61l3.76-3.76a26.67,26.67,37.7,0l3.76,3.76A32,0Z"/><path class="cls-1" d="M32,10.67a21.31,21.31,0-15.07,36.4l3.76-3.76a16,16,22.62,3.76A21.31,10.67Z"/><path class="cls-1" d="M32,21.33a10.68,10.68,0-7.55,18.22l3.79-3.79A5.19,5.19,32a5.33,10.66,1-1.57,3.76l3.79,3.79A10.68,21.33Z"/></g></g></svg>
        </a>
      </li>

      <li class="navbar-li">
        <a href="#" class="nav-link">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48"><defs><style>.cls-1{fill:#35353d;}</style></defs><title>Asset 22</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M63.47,5.17A8,8,56,0H8A8,.48,7.44,8V40a8,5,7.41A7.85,7.85,48H56a7.32,7.32,2.85-.56A7.84,7.84,63,43.89,64,40V8A7.86,7.86,63.47,5.17ZM5.33,8A2.68,2.68,5.33H56A2.68,58.67,8v.51l-21.26,16L33,27.92l-1,.75-1-.78-4.46-3.33L5.33,8.61Zm0,32V15.28L22.11,27.89,5.39,40.45A2,2,40Zm6,2.67L26.56,31.23l3.84,2.9a2.64,2.64,3.2,0l3.81-2.88L52.53,42.67ZM58.67,40a2,1-.08.56L41.84,15.17Z"/></g></g></svg>
        </a>
      </li>
    </ul>
  </nav>
  <main>
    <h1>CSS</h1>

    <p>CSS (siglas en inglés de Cascading Style Sheets),en español «Hojas de estilo en cascada»,es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.2​ Es muy usado para establecer
      el diseño visual de los documentos web,e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML,incluyendo XHTML,SVG,XUL,RSS,etcétera. Te puede ayudar a crear tu propio sitio web. Junto con
      HTML y JavaScript,CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas,interfaces de usuario para aplicaciones web y GUIs para muchas aplicaciones móviles (como Firefox OS).3​

    </p>
  </main>

</body>

解决方法

在您的svg中添加一些height和width，它将显示出来。

像这样-

 body {
        background: white;
        color: black;
        font-family: 'Source Sans Pro',sans-serif;
        font-size: 16px;
    
        margin: 0;
        padding: 0;
    
    }
    
    body::-webkit-scrollbar {
        width: 0.25rem;
    }
    
    body::-webkit-scrollbar-track {
        background: #1e1e24;
    }
    
    body::-webkit-scrollbar-thumb {
        background: #6649b8;
    }
    
    main {
        margin-left: 8rem;
        padding: 1rem;
    }
    
    .navbar {
        width: 8rem;
        height: 200vh;
        position: fixed;
        background: rgba(0,300,200,0.80);
    }
    
    ul {
        list-style: none;
        padding: 0px;
        margin: 0px;
        display: flex;
        width: 50px;
        position: fixed;
        height: 100%;
        line-height: 100px;
        flex-direction: column;
        align-items: center;
    }
    
    li:first-child {
        padding: 7px;
    }
    
    li:last-child {
        margin-top: 560px;
    }
    
    ul li svg {
      height: 30px;
      width: 30px;
    }
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
    <title>Test</title>
</head>
<body>
    <nav class="navbar">
        <ul class="navbar-ul">
            <li class="navbar-li">
                <a href="#" class="nav-link">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37.33 64"><defs><style>.cls-1{fill:#35353d;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M32,0H5.33A5.33,5.33,5.33V58.67A5.33,64H32a5.33,5.33-5.33V5.33A5.33,32,0ZM5.33,58.67V5.33H32V58.67Z"/><path class="cls-1" d="M25.36,8H12a1.34,1.34,2.67H25.36a1.34,0-2.67Z"/><circle class="cls-1" cx="18.64" cy="53.33" r="2.67"/></g></g></svg>
                </a>
            </li>

            <li class="navbar-li">
                <a href="#" class="nav-link">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.99 64"><defs><style>.cls-1{fill:#35353d;}</style></defs><title>Asset 13</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M47.09,19.72a23.38,23.38,0-46.19,84.16,24.55,46.19,0A84.16,47.09,19.72ZM6.18,20.5a18.05,18.05,1,35.64,79.22,.37,19.58c-.09,0-.17,0-.26,0a64.35,64.35,1-35.87,0c-.09,0A78.73,78.73,6.18,20.5ZM24,58.67A18.08,18.08,6.68,45.75,69.76,24,48a69.75,69.75,17.31-2.24A18.06,18.06,58.67Z"/><path class="cls-1" d="M24,29.33a2.66,2.66,2.66-2.66V16a2.67,2.67,0-5.33,0V26.67A2.66,29.33Z"/></g></g></svg>
                </a>
            </li>

            <li class="navbar-li">
                <a href="#" class="nav-link">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 54.61"><defs><style>.cls-1{fill:#35353d;}</style></defs><title>Asset 23</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M32,0A32,9.39,54.61l3.76-3.76a26.67,26.67,37.7,0l3.76,3.76A32,0Z"/><path class="cls-1" d="M32,10.67a21.31,21.31,0-15.07,36.4l3.76-3.76a16,16,22.62,3.76A21.31,10.67Z"/><path class="cls-1" d="M32,21.33a10.68,10.68,0-7.55,18.22l3.79-3.79A5.19,5.19,32a5.33,10.66,1-1.57,3.76l3.79,3.79A10.68,21.33Z"/></g></g></svg>
                </a>
            </li>

            <li class="navbar-li">
                <a href="#" class="nav-link">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48"><defs><style>.cls-1{fill:#35353d;}</style></defs><title>Asset 22</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M63.47,5.17A8,8,56,0H8A8,.48,7.44,8V40a8,5,7.41A7.85,7.85,48H56a7.32,7.32,2.85-.56A7.84,7.84,63,43.89,64,40V8A7.86,7.86,63.47,5.17ZM5.33,8A2.68,2.68,5.33H56A2.68,58.67,8v.51l-21.26,16L33,27.92l-1,.75-1-.78-4.46-3.33L5.33,8.61Zm0,32V15.28L22.11,27.89,5.39,40.45A2,2,40Zm6,2.67L26.56,31.23l3.84,2.9a2.64,2.64,3.2,0l3.81-2.88L52.53,42.67ZM58.67,40a2,1-.08.56L41.84,15.17Z"/></g></g></svg>
                </a>
            </li>
        </ul>
    </nav>
    <main>
        <h1>CSS</h1>
        
<p>CSS (siglas en inglés de Cascading Style Sheets),en español «Hojas de estilo en cascada»,es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.2​ Es muy usado para establecer el diseño visual de los documentos web,e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML,incluyendo XHTML,SVG,XUL,RSS,etcétera. Te puede ayudar a crear tu propio sitio web. Junto con HTML y JavaScript,CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas,interfaces de usuario para aplicaciones web y GUIs para muchas aplicaciones móviles (como Firefox OS).3​

</p>
    </main>
    
</body>
</html>

,

只需将height和width添加到SVG和object-fit即可保持其形状。
CSS 

body {
    background: white;
    color: black;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 16px;

    margin: 0;
    padding: 0;

}

body::-webkit-scrollbar {
    width: 0.25rem;
}

body::-webkit-scrollbar-track {
    background: #1e1e24;
}

body::-webkit-scrollbar-thumb {
    background: #6649b8;
}

main {
    margin-left: 8rem;
    padding: 1rem;
}

.navbar {
    width: 8rem;
    height: 200vh;
    position: fixed;
    background: rgba(0,0.80);
}

ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    width: 50px;
    position: fixed;
    height: 100%;
    line-height: 100px;
    flex-direction: column;
    align-items: center;


}

li:first-child {
    padding: 7px;
}

/* Change this to make it responsiv */
li:last-child {
    position: absolute;
    bottom: 10px;
}

/* What You Should Add */
li svg {
    height: 40px;
    width: 40px;
    object-fit: contain;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap"
      rel="stylesheet"
    />
    <title>Test</title>
  </head>
  <body>
    <nav class="navbar">
      <ul class="navbar-ul">
        <li class="navbar-li">
          <a href="#" class="nav-link">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37.33 64">
              <defs>
                <style>
                  .cls-1 {
                    fill: #35353d;
                  }
                </style>
              </defs>
              <title>Asset 1</title>
              <g id="Layer_2" data-name="Layer 2">
                <g id="Layer_1-2" data-name="Layer 1">
                  <path
                    class="cls-1"
                    d="M32,58.67V5.33H32V58.67Z"
                  />
                  <path
                    class="cls-1"
                    d="M25.36,0-2.67Z"
                  />
                  <circle class="cls-1" cx="18.64" cy="53.33" r="2.67" />
                </g>
              </g>
            </svg>
          </a>
        </li>

        <li class="navbar-li">
          <a href="#" class="nav-link">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.99 64">
              <defs>
                <style>
                  .cls-1 {
                    fill: #35353d;
                  }
                </style>
              </defs>
              <title>Asset 13</title>
              <g id="Layer_2" data-name="Layer 2">
                <g id="Layer_1-2" data-name="Layer 1">
                  <path
                    class="cls-1"
                    d="M47.09,58.67Z"
                  />
                  <path
                    class="cls-1"
                    d="M24,29.33Z"
                  />
                </g>
              </g>
            </svg>
          </a>
        </li>

        <li class="navbar-li">
          <a href="#" class="nav-link">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 54.61">
              <defs>
                <style>
                  .cls-1 {
                    fill: #35353d;
                  }
                </style>
              </defs>
              <title>Asset 23</title>
              <g id="Layer_2" data-name="Layer 2">
                <g id="Layer_1-2" data-name="Layer 1">
                  <path
                    class="cls-1"
                    d="M32,0Z"
                  />
                  <path
                    class="cls-1"
                    d="M32,10.67Z"
                  />
                  <path
                    class="cls-1"
                    d="M32,21.33Z"
                  />
                </g>
              </g>
            </svg>
          </a>
        </li>

        <li class="navbar-li">
          <a href="#" class="nav-link">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48">
              <defs>
                <style>
                  .cls-1 {
                    fill: #35353d;
                  }
                </style>
              </defs>
              <title>Asset 22</title>
              <g id="Layer_2" data-name="Layer 2">
                <g id="Layer_1-2" data-name="Layer 1">
                  <path
                    class="cls-1"
                    d="M63.47,15.17Z"
                  />
                </g>
              </g>
            </svg>
          </a>
        </li>
      </ul>
    </nav>
    <main>
      <h1>CSS</h1>

      <p>
        CSS (siglas en inglés de Cascading Style Sheets),en español «Hojas de
        estilo en cascada»,es un lenguaje de diseño gráfico para definir y
        crear la presentación de un documento estructurado escrito en un
        lenguaje de marcado.2​ Es muy usado para establecer el diseño visual de
        los documentos web,e interfaces de usuario escritas en HTML o XHTML; el
        lenguaje puede ser aplicado a cualquier documento XML,etcétera. Te puede ayudar a crear tu propio sitio web.
        Junto con HTML y JavaScript,CSS es una tecnología usada por muchos
        sitios web para crear páginas visualmente atractivas,interfaces de
        usuario para aplicaciones web y GUIs para muchas aplicaciones móviles
        (como Firefox OS).3​
      </p>
    </main>
  </body>
</html>
HTML

html

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...