Question

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

<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

非常奇怪的是，锚没有占据整个李。我尝试删除一些样式以查看它是否存在冲突，但它没有任何区别。

无论如何，我只是玩弄了李和锚的尺寸，似乎工作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，看它是否有效。

li没有被锚标记填满

1 个答案: