Question

我在span元素中有一个anchor。我想要的只是： 1）具有anchor文本的宽度，以使其在span元素上不重叠。 2）span元素应与锚文本的第一行对齐 3）span元素位于anchor文本

的右侧

＆＃13;

a {
  width: 147px;
  display: inline-block!important;
}
span.expand {
  background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
  text-decoration: none !important;
  padding-right: 14px;
  margin-left: 100px;
}

＆＃13;

<a href="#">
    Enrollment to communication skills 
    <span class="expand"></span>
</a>

＆＃13;

我别无选择，只能在span内使用anchor，即使不推荐这样做。

Answer 1

不确定您想要达到的目标，但根据您提到的内容，这是解决方案。

<强> WORKING DEMO

CSS更改：

a {
  width: auto;
  display: inline-block!important;
}
span.expand {
  background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
  text-decoration: none !important;
  background-position: top right;
  padding: 11px;
  float: right;
}

编辑的CSS更改：

如果宽度需要存在而不将其设置为auto，则下面是代码。

<强> WORKING DEMO WITHOUT AUTO WIDTH

a {
  width: 135px;
  display: inline-block;
    position: relative;

}
span.expand {
  background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
  text-decoration: none !important;
  background-position: 0 0px;
  padding: 11px;
  position: absolute;
  z-index: 1;
  top: 1px;
  right: 17px;
}

希望这有帮助。

Answer 2

您可以通过几种方式完成此操作。一种方法是将<span>移到锚之外。另一种方法是将背景图像添加到锚点并删除范围。

在这个JSFiddle中可以看到两种方式：https://jsfiddle.net/xpoa06x8/

<a href="#">
    <!-- using a backgroundimage -->
    Enrollment to communication skills 
</a>
<br/><br/><br/><br/><br/>

<a class="href" href="#">
    <!-- using an extra span -->
    Enrollment to communication skills 
</a>
<span class="extend"></span>

CSS：

a {
  width: 146px;
  display: inline-block!important;
  background-image: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif);
  background-repeat: no-repeat;
  background-position: 120px 0px;

}

/* Second example */
.href{
    background-image: none;
    float:left;
    display:block !important;        
}
.extend{
  display:block;
  float:left;
  background-image: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif);
  background-repeat: no-repeat;
  width:15px;    
  height:15px;
}

Answer 3

Working fiddle

我使用:after

添加了.extend伪元素，而不是position:absolute;

a {
    width: 147px;
    display: inline-block!important;
    position:relative
}
a:after {
    background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
    text-decoration: none !important;
    width: 15px;
    height: 15px;
    vertical-align: baseline;
    display: block;
    margin-left: 5px;
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
}

锚标记内的跨度位置

3 个答案: