时间戳

首页 > 解决方案 > 如何在导航栏中与单词保持距离？

css - 如何在导航栏中与单词保持距离？

问题描述

我是编程新手，我有一个简单的问题：我想让这个导航栏中的单词彼此相距更远。

    <div class="header">
         <header class="title">CSS Tricks</header>
         <ul>
              <li>
                  <a href="#">Home</a>
              </li>

              <li>
                  <a href="#">Contact</a>
              </li>

              <li>  
                  <a href="#">About</a>
              </li>

              <li>
                  <a href="#">News</a>
              </li>
            </ul>
        </div>

CSS：

    ul{
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        width: 100%;
        overflow: hidden;
        top: 0;
        position: fixed;
    }
    li{
        float: right;
        transform: translateX(-300px);
        transform: translateY(-30px;);
    }
    li a{
        display: block;
        text-align:center;
        padding: 12px 16px;
        text-decoration: none;
        color: #fff ;
        font-size: 37px;
        font-family: 'Alegreya', serif;
    }

标签： css

解决方案

我看不出使用变换的意义。使用display: flex而不是，float: right如果你想把它放在右边，做justify-content: flex-end。关于您的问题，如果它在<a>使用之间有空格，margin: 0 30px或者您的意思是在字母之间，请letter-spacing: 5px按照下面的示例进行操作。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    top: 0;
    position: fixed;
    display: flex;
}

li a {
    display: block;
    padding: 12px 0;
    margin: 0 30px;
    text-decoration: none;
    color: #000;
    font-size: 3em;
    font-family: 'Alegreya', serif;
    letter-spacing: 5px;
}
 <div class="header">
     <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">News</a></li>
      </ul>
  </div>

推荐阅读