html - li 没有被锚标签填充

Question

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

代码在这里：http: //jsfiddle.net/8Zfp3/

<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>

CSS

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;
}

Answer 1

主播没有占据整个里，这很奇怪。我尝试删除一些样式以查看它是否冲突，但这并没有什么不同。

无论如何，我只是玩弄了 li 和 anchor 的尺寸，它似乎可以工作FIDDLE

/* 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;
}

不幸的是，它是固定尺寸而不是基于百分比，它似乎也不想采用百分比。

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