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

我有下面的导航栏，并添加了资源中心链接和内置css的startburst。我正试图让星暴位于文本的左侧（在同一行上），但它是重叠的，使导航栏看起来很不稳定。我试着往墙上扔了很多泥，看看是否有东西粘住了（包括让它们阻挡内联元素），但我还是弄不清楚。我真的很感谢你的帮助。谢谢

屏幕截图：

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

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

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

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

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

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

资源中心链接的CSS:

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

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

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

CSS for li:

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

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

.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，什么终于起作用了！：

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

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

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

---

取下

顶部：2米

并添加一个

浮点：右在
.starburst
样式中。这会改善你的处境

如果您希望它位于左侧，也可以删除
left:2em并将
浮动
更改为
左侧
。你也必须给你的链接添加一些空间。如果链接与星暴重叠，阻止动画启动，只需添加一个
z-index:2至
。星爆

下面是一个片段：


.mainNav menu.menuItem{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
显示：内联块；
字体大小：13px；
字体大小：粗体；
保证金：0；
垂直对齐：顶部；
}
.navbar nav>li{
浮动：左；
}
.nav>li{
位置：相对位置；
显示：块；
}
* {
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
用户代理样式表
李{
显示：列表项；
文本对齐：-webkit匹配父项；
}
.mainNav menu.menuItem.text a{
颜色：#9D9D9D；
显示：块；
填充：4px15px；
文字装饰：无；
}
.navbar默认值.navbar nav>li>a{
颜色：#777；
}
.mainNav menu.menuItem>a{
边框顶部：1px实心透明；
边框底部：1px实心透明；
左边框：1px实心#9d9d；
右边框：1px实心#9d9d；
显示：内联块；
垂直对齐：顶部；
}
.navbar品牌，.navbar nav>li>a{
文本阴影：0 1px 0 rgba（255、255、255、.25）；
}
.导航栏导航>李>a{
填充顶部：15px；
垫底：15px；
}
.导航栏导航>李>a{
填充顶部：10px；
垫底：10px；
线高：20px；
}
.nav>li>a{
位置：相对位置；
显示：块；
填充：10px 15px 0px 15px；
}
a{
光标：指针；
光标：手；
}
.星暴{
显示：块；
宽度：1.5em；
高度：1.5em；
背景：#fe0；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
旋转：-45度；
位置：相对位置；
文本对齐：居中；
文字装饰：无；
颜色：#000；
字体大小：粗体；
字体系列：Arial，无衬线；
文本阴影：03em#f00，04px#f30；
-moz转换：-moz转换0.3s易用性；
-webkit转换：-webkit转换0.3s易用性；
转换：转换0.3s轻松；
浮动：左；
z指数：2；
}
.星暴跨度{
显示：块；
宽度：1.5em；
高度：1.5em；
背景：#fe0；
-webkit变换：旋转（22.5度）；
-moz变换：旋转（22.5度）；
旋转：22.5度；
}
.星暴：悬停，
.星暴：悬停跨度{
背景：#fa0；
颜色：#fff；
文本阴影：0 0 20px#fff，0 0 8px#fff；
}
.星暴：悬停{
-webkit变换：旋转（315度）；
-moz变换：旋转（315度）；
旋转：315度；
}






您在
的class属性中有一个错误。引号不能嵌套。另外，如果截图中的代码很重要，您可以将其添加到问题中吗？代码的截图是无用的。当然，我会马上修复它！代码已添加到帖子中。谢谢。我现在就试试。我实际上是想把星暴放在文本的左边。我会尝试向左浮动？？？不幸的是两者都不起作用。将其向右浮动，将其移出链接的边界并放入注销链接的框中。是的，添加了一行关于此的内容！我看到你在左边又加了一个补丁。让我试试，伙计，快到了。我在链接的左侧添加了30像素的填充，但是星光暴增在框的左上角有点重叠。