时间戳

首页 > 解决方案 > 为什么我在锚标签和跨度之间有空间

html - 为什么我在锚标签和跨度之间有空间

问题描述

我有个问题。我在列表的所有项目中有一个带有链接的列表。当我想在锚标签中添加一个跨度时，我有一个空间并且无法删除它..

 <li class="elementMyAccount spaceTopBetweenElementMyAccount">

     <a href=""
         class="elementMyAccountText">
         Text4
         <div class="adressDescription" >(text4)</div>
     </a>
</li>

我发给你 jsFiddle 给你看 css 和 html：

https://jsfiddle.net/5fwvsqnb/10

我已经在我的 css 上更改了这个空格线，但它只适用于谷歌浏览器......但不适用于 Safari 和 IE（不要尝试其他人）

我改变了CSS：

#my-account .elementMyAccountText{
font-size: 15px;
position: absolute;
margin-left : 5px;
line-height:60px;
width:240px;
display: flex;
align-items: center;
}

#my-account .adressDescription{
display:block;
position:absolute;
font-size: 11px;
text-decoration: none;
margin-left: 40px;
line-height:15px;
display: block;
}

但也许这不是解决方案，因为在 IE 上，我的跨度和上面的文本之间有一个空格。

如果您愿意帮助我，谢谢大家！

标签： htmlcsscross-browserstylesheet

解决方案

问题出在你的代码中，elementMyAccountText类有position: absolute;.

如果要与框的中心左对齐显示，TEXT则可以使用display: flextoul和to 。lialign-items: center;li

如果你想要完整的框可点击然后

height从类中删除elementMyAccount并添加以下代码

ul li a{
width: 100%;
display: block;
padding: 20px 0; 
}


.listElementMyAccount {
  margin-top: 50px;
}

.listElementMyAccount ul {
  margin-left: -8px;
  display: flex;
}

.elementMyAccount {
  border-radius: 7px;
  border: 1px solid black;
  height: 60px;
  width: 240px;
  margin-left: 8px;
  margin-top: 8px;
  display: flex;
  align-items: center;
}


/*.elementMyAccountText{
	font-size: 15px;
	position: absolute;
	margin-left : 5px;
	line-height:60px;
	width:240px;
	height:60px;

}*/

.elementMyAccountImg {
  margin-left: 5px;
  opacity: 0.75;
  margin-right: 10px;
  vertical-align: middle;
}

.adressDescription {
  display: block;
  position: absolute;
  font-size: 11px;
  text-decoration: none;
  line-height: 15px;
  display: block;
}
<div class="listElementMyAccount">
  <ul>

    <li class="elementMyAccount">
      <a href="" class="elementMyAccountText">
                                    TEXT1
                                </a>
    </li>
    <li class="elementMyAccount">
      <a href="" class="elementMyAccountText">
                                    TEXT2
                                </a>
    </li>
    <li class="elementMyAccount">
      <a href="" class="elementMyAccountText">
                                    TEXT3
                                </a>
    </li>
    <li class="elementMyAccount">
      <a href="" class="elementMyAccountText">
                                    TEXT4
                                                                                                      <span class="adressDescription" >(text4)</span>
                                </a>
    </li>

  </ul>



</div>

推荐阅读