Question

现在我遇到了这个问题：

我有一个<a>标签，其中我想显示一些文字，然后是一个带有unicode的<span>，我想在我的最右边显示<a>标记宽度。

我在这里找到了一个小提琴：Click me

除了text-align: right之外，您在常规文字旁边看到的下拉按钮并未滥用所有宽度。

我在这里错过了什么吗？

Answer 1

尝试

.textAlignRight{
float:right;
}

而不是text-align

＆＃13;

.anchor{
    display: block;
    width: 200px;
    background-color: grey;
}

.textAlignRight{
    float:right;
}

＆＃13;

<a class="anchor" href="#"> Blabla
    <span class="textAlignRight">&#9013;</span>
</a>

＆＃13;

Answer 2

你想为此使用浮点数。您目前正在尝试将元素中的文本左侧和右对齐 - 您不能这样做，而是float:right图标：

Demo Fiddle

.anchor {
    display: block;
    width: 550px;
    background-color: grey;
}
.textAlignRight {
    float:right;
}

Answer 3

使用此选项，您只需更改.textAlignRight浮动属性：

.anchor {
    display: block;
    width: 550px;
    background-color: grey;
}
.textAlignRight {
    float:right;
}

Answer 4

其他人使用float: right选项回答这是最简单的方法，但另一种可能性，只是为了好玩，是使用:after选择器。

拨弄

https://jsfiddle.net/j6wp75xu/5/

CSS

.anchor{
    display: block;
    width: 550px;
    background-color: grey;
    position: relative;
}

.anchor:after {
    position: absolute;
    right: 0px;
    content: "\9013";  /* the \ and the number is all you need for displaying unicode in css content */
}

HTML

<a class="anchor" href="#">Blabla</a>

如何在锚标记内对齐跨度以使用它给出的所有宽度？

4 个答案:

Demo Fiddle