CSS重叠问题（li中的a和span标签）

Question

我有下面的导航栏，并添加了RESOURCE HUB链接和一个内置css的startburst。我试图让starburst坐在文本的左边（在同一条线上），但它重叠并使导航栏看起来很不稳定。我试过在墙上扔了很多泥，看看是否有任何东西粘在一起（包括制作阻挡内联元素），但是无法弄明白。我非常感谢任何帮助。谢谢。

截图：

HTML：

<li class="menuItem text">
    <span class="starburst"><span><span><span></span></span></span></span>
    <a href="http://www.verifiedvolunteers.info/" target="vvSite">
      RESOURCE HUB
    </a>
</li>

starburst的CSS：

.starburst {
  display:block;
  width:1.5em;
  height:1.5em;
  background:#fe0;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  rotation:-45deg;
  position:relative;
  top:2em;
  left:2em;
  text-align:center;
  text-decoration:none;
  color:#000;
  font-weight:bold;
  font-family:Arial, sans-serif;
  text-shadow:0 0 3em #f00, 0 0 4px #f30;
  -moz-transition: -moz-transform 0.3s ease;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
}
.starburst span {
  display:block;
  width:1.5em;
  height:1.5em;
  background:#fe0;
  -webkit-transform:rotate(22.5deg);
  -moz-transform:rotate(22.5deg);
  rotation:22.5deg;
}
.starburst:hover,
.starburst:hover span {
  background:#fa0;
  color:#fff;
  text-shadow:0 0 20px #fff, 0 0 8px #fff;
}
.starburst:hover {
  -webkit-transform:rotate(315deg);
  -moz-transform:rotate(315deg);
  rotation:315deg;
}

资源中心链接的CSS：

.mainNav-menu .menuItem.text a {
    color: #9D9D9D;
    display: block;
    padding: 4px 15px;
    text-decoration: none;
}
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.mainNav-menu .menuItem > a {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid #9D9D9D;
    border-right: 1px solid #9D9D9D;
    display: inline-block;
    vertical-align: top;
}
.navbar-brand, .navbar-nav > li > a {
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
@media (min-width: 768px)
.navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
}
.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
a {
    cursor: pointer;
    cursor: hand;
}

li的CSS：

.mainNav-menu .menuItem {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    vertical-align: top;
}
@media (min-width: 768px)
.navbar-nav > li {
    float: left;
}
.nav > li {
    position: relative;
    display: block;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}

感谢Nomis，最终有效了！：

Answer 1

删除top:2em;并添加float:right;风格的.starburst。它应该改善你的情况。

如果你想要它在左边，也删除left:2em;并将float更改为left。您还必须为链接添加一些空间。如果链接重叠你的星暴，阻止动画启动，只需将z-index:2;添加到.starburst。

这是一个片段：

.mainNav-menu .menuItem {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    vertical-align: top;
}
.navbar-nav > li {
    float: left;
}
.nav > li {
    position: relative;
    display: block;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}
.mainNav-menu .menuItem.text a {
    color: #9D9D9D;
    display: block;
    padding: 4px 15px;
    text-decoration: none;
}
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.mainNav-menu .menuItem > a {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid #9D9D9D;
    border-right: 1px solid #9D9D9D;
    display: inline-block;
    vertical-align: top;
}
.navbar-brand, .navbar-nav > li > a {
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
}
.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px 0px 15px;
}
a {
    cursor: pointer;
    cursor: hand;
}

.starburst {
  display:block;
  width:1.5em;
  height:1.5em;
  background:#fe0;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  rotation:-45deg;
  position:relative;
  text-align:center;
  text-decoration:none;
  color:#000;
  font-weight:bold;
  font-family:Arial, sans-serif;
  text-shadow:0 0 3em #f00, 0 0 4px #f30;
  -moz-transition: -moz-transform 0.3s ease;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  float:left;
  z-index:2;
}
.starburst span {
  display:block;
  width:1.5em;
  height:1.5em;
  background:#fe0;
  -webkit-transform:rotate(22.5deg);
  -moz-transform:rotate(22.5deg);
  rotation:22.5deg;
}
.starburst:hover,
.starburst:hover span {
  background:#fa0;
  color:#fff;
  text-shadow:0 0 20px #fff, 0 0 8px #fff;
}
.starburst:hover {
  -webkit-transform:rotate(315deg);
  -moz-transform:rotate(315deg);
  rotation:315deg;
}

<div class="navbar-nav nav">


<li class="menuItem text">
  <a href="http://www.verifiedvolunteers.info/" target="vvSite">
    <span class="starburst"><span><span><span></span></span></span></span>
    
      RESOURCE HUB
    </a>
</li>
<li class="menuItem text">
<a href="http://www.verifiedvolunteers.info/" target="vvSite">
    <span class="starburst"><span><span><span></span></span></span></span>
    
      RESOURCE HUB
    </a>
</li>
<li class="menuItem text">
  <a href="http://www.verifiedvolunteers.info/" target="vvSite">
    <span class="starburst"><span><span><span></span></span></span></span>
      RESOURCE HUB
    </a>
</li></div>