CSS重叠问题(li中的a和span标记)

Question

我有下面的导航栏，并添加了资源集线器链接和一个内置于css的startburst。我试图让星星爆炸坐在文字的左边(同一行)，但它是重叠的，使导航条看起来都摇摇欲坠。我试着往墙上扔了很多泥，看看是否有什么东西粘在墙上(包括让它们成为嵌在一起的元素)，但无法弄清楚。我真的很感谢你的帮助。谢谢。

截图：

​

​

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>

用于星爆的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;
}

CSS for li:

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

终于成功了多亏了诺米斯！：

​

​

Answer 1

删除top:2em;并在.starburst样式中添加一个float:right;。它应该能改善你的处境。

如果您希望将其移到左侧，还可以移除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>

​