1

我有 2 个 Unicode 箭头，我想将它们放在彼此之上（例如作为列排序器）。

我怎样才能做到这一点？-<br>跨度中的标签不起作用，因为它会破坏整个内容流。

我也不能设置position:absolute和top 0，left 0，因为它需要相对定位。

见小提琴：http: //jsfiddle.net/YrJTN/1/

4

6 回答 6

3

您仍然可以使用绝对位置，只需添加一个具有相对位置的容器，如下所示：`

<span style="position:relative">
    <span style="position: absolute;">▼&lt;/span>
    <span style="position: absolute;">▲&lt;/span>
</span>
于 2013-08-23T11:11:28.317 回答
1 
Name<span class="up" style="text-size:50%"></span>

CSS：

.up:before{
    content: "▲";
    position:absolute;
    top:0;
}
.up:after{
    content: "▼";
    position:absolute;
    top: 0.8em;
    bottom:0;
}

小提琴：http: //jsfiddle.net/KqV6A/

于 2013-08-23T11:14:24.700 回答
0

HTML

<body>
    <span class="column">
        Name
        <span class="arrow top">&#9650;</span>
        <span class="arrow bottom">&#9660;</span>
    </span>
</body>

CSS

.column {
    position: relative;
}

.arrow {
    font-size: 10pt;
    position: absolute;    
}
.top {
    right: -10px;
    top: -5px;
}

.bottom {
    right: -10px;
    bottom: -5px;
}
于 2013-08-23T11:14:08.323 回答
0

垂直对齐和负边距的组合：

HTML：

Name<span class="arrows"><a class="up" href="#up">&#9650;</a><a class="down" href="#down">&#9660;</a></span>

CSS：

.arrows a { display:inline-block; text-decoration:none; width:1em;  }
.arrows a + a { margin-left:-1em; }
.up { vertical-align:0.4em;  }
.down { vertical-align:-0.4em; }

http://jsfiddle.net/YrJTN/6/

于 2013-08-23T11:14:09.253 回答
0

演示

.fl {
    color: #FCB80D;
    float: right;
}
.wrapper {
    width:60px;
    font-size:12px;
}

<div class="wrapper">text
    <div class="fl"> 
    <a href="#" id="scrollUp">▲&lt;/a> <!-- </br> if you want-->
    <a href="#" id="scrollDown">▼&lt;/a>
    </div>
</div>
于 2013-08-23T11:16:21.147 回答
0 
 <body>Name<span style=" position: absolute;text-size:50% ">&#9660;</span><span style=" position: absolute;text-size:50% ">&#9650;</span></body>
于 2013-08-23T11:18:43.820 回答