1. css链接不工作2.如何垂直居中导航栏并在每个导航栏上添加填充

Question

我正在努力建立自己的网站.1.我试图在页面中间的垂直方向创建链接; A,B,C,D然而它不作为链接工作,它就像一个段落.

2. 我想让A,B,C,D在它们之间有空格.

3. 有没有办法让A,B,C,D链接被圆圈覆盖？

/* navigation */
.navig {
    float: left;
    margin-top: 150px;
}
.navig a{
    text-decoration: none;
    color:black;
}
.navig a:hover{
    
}

.navig li{
    list-style-type: none;
    position: fixed;
    padding-top: 50x;
    line-height: 40px;
}

   
  <div class="container">
    <nav class="navig">
      <ul>
        <li><a href="http://google.com">A</a></li>
        <li><a href="http://google.com">B</a></li>
        <li><a href="http://google.com">C</a></li>
        <li><a href="http://google.com">D</a></li>
      </ul>
    </nav>
    
    

Answer 1

如果我正确理解您的问题，您希望使 ABCD 显示为一个链接并使其可读。尝试此操作以使其显示为一个链接。注意：字母之间的空格也可以单击。

<div class="container">
    <a href="http://google.com">
        <nav class="navig">
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
            </ul>
        </nav>
    </a>
</div>

要解决间距问题，请position: fixed从.navig liCSS 组中删除。我认为这导致它们都出现在同一个位置，而不是相互之间留出空间。希望这可以帮助！