Html li没有被锚标签填满

我正在尝试为wordpress创建一个导航菜单。不知何故，第一个锚定标记能够将整个列表项作为标题，但对于存档，我已经旋转了锚定标记，但无论我是否旋转锚定标记，它都拒绝将整个列表项作为可单击链接。我遗漏了什么？我该如何解决这个问题？提前谢谢

代码如下：

---

真奇怪，主播没有占据整个李。我试着删除一些样式，看看是否有冲突，但没有什么不同

不管怎样，我只是玩弄了一下li和anchor的尺寸，这似乎很管用

不幸的是，它是固定的维度，不是基于百分比的，它似乎也不想采用百分比

---

也许在没有那些菜单项id和类的情况下重新创建li，看看它是否有效。

将

display:block

放在你的

a

样式中。我不希望它太笼统，以至于所有锚定标记都必须是display:block。我将该样式添加到li.archives>a类中，但它不会使整个li可点击。您可以查看一下JSFIDLE并将display:block添加到a不起作用。不确定我是否理解您的意思。也许这对你有帮助：

li.archives>a{height:80px；line height:80px}

如果你看看小提琴，你会发现每隔一个li都是可点击的li，而归档li不是。只有锚定标签是可点击的，即使添加了display:block，也不会占用整个li。我想知道为什么会发生这种情况，以及如何纠正这种情况。谢谢

<header class="navbar">
  <nav class="menu-item-container">
    <ul class="navblog">
        <li class="brand">
          <a href="#" class="brand">title</a>
        </li>
        <li id="menu-item-106" class="navlinks archives menu-item menu-item-type-post_type menu-item-object-page menu-item-106">
          <a href="http://localhost/wp/archives/">Archives</a>
        </li>
    </ul>
    <ul class="navbar navsocial">
        <li>
          <a href="//facebook.com" class="navlinks navsocial facebook"><span class="icon-facebook facebook icon-large "></span>facebook</a>
        </li>
        <li>
          <a href="//twitter.com/" class="navlinks navsocial twitter"><span class="icon-twitter icon-large "></span>twitter</a>
        </li>
        <li>
          <a href="//twitch.tv//" class="navlinks navsocial twitchtv"><span class="icon-youtube-play icon-large "></span>twitch.tv</a>
        </li>
        <li>
          <a href="//ggtracker.com" class="navlinks navsocial ggtracker"><span class="icon-gamepad icon-large"></span>ggtracker</a>
        </li>
        <li>
          <a href="//ggtracker.com" class="navlinks navsocial ggtracker"><span class="icon-gamepad icon-large"></span>ggtracker</a>
        </li>
    </ul>
  </nav>
</header>

h1, h2, h3, h4, h5, h6, a, li, span, p, input, html, body {
    font-family:"Segoe UI", sans-serif;
    font-size: 62.5%;
}

html {
    width: 100%;
}

body {
    width: 100%;
    max-width:960px;
    margin: 0 auto;
}

li {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #fff;
    &:visited {
        color: #fff;
    }

}

li {
    list-style-type: none;
}

ul {
    margin: 0%;
    padding: 0%;
}

.pull-right {
    float:right;
}

.pull-left {
    float:left;
}

::selection {
    width: 100%;
    background-color: rgba(242, 56, 90, 0.2);
}

::-moz-selection {
    width: 100%;
    background-color: rgba(242, 56, 90, 0.2);
}

/* line 5, scss/header.scss */
li > a {
    display: block;
}

/* line 9, scss/header.scss */
nav.menu-item-container {
    font-size: 6rem;
    max-height: 160px;
}

/* line 14, scss/header.scss */
.navbar.navsocial, nav.menu-item-container, .navblog {
    display: -webkit-flex;
    display: flex;
    display: flexbox;
}

/* line 20, scss/header.scss */
.navbar.navsocial {
    -webkit-flex-direction: column;
    -webkit-flex-wrap: wrap;
    min-height: 160px;
    max-width: 19%;
}

/* line 26, scss/header.scss */
.navbar.navsocial > li > a {
    box-sizing: border-box;
    text-align: center;
    min-height: 32px;
}

/* line 33, scss/header.scss */
.navblog {
    -webkit-flex-direction: row;
    width: 81%;
}

/* line 39, scss/header.scss */
li.brand {
    flex: 2;
    -webkit-flex: 2;
}

/* line 43, scss/header.scss */
li.brand > a {
    height: 160px;
}

/* line 48, scss/header.scss */
li.archives {
    width: 80px;
    background-color: red;
}

/* line 53, scss/header.scss */
li.archives > a {
    border: 1px solid black;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: tb-rl;
}

/* line 60, scss/header.scss */
li.archives > a:before {
    font-family: FontAwesome;
    content:"\f099";
}

/* line 66, scss/header.scss */
a.facebook {
    background-color: blue;
}

/* line 70, scss/header.scss */
a.twitter {
    background-color: orange;
}

/* line 74, scss/header.scss */
a.ggtracker {
    background-color: purple;
}

/* line 78, scss/header.scss */
a.twitchtv {
    background-color: green;
}

/* line 82, scss/header.scss */
a.brand {
    background-color: yellow;
}

/* line 48, scss/header.scss */
li.archives {
  width: 161px;
  background-color: red;
}

/* line 53, scss/header.scss */
li.archives > a {
  border: 1px solid black;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  writing-mode: tb-rl;
    width: 159px;
    height: 159px;
}