Question

我有2个Unicode箭头，我希望彼此重叠（例如作为列分类器）。

我该怎么做？ - 跨区中的<br>标记将无效，因为它会破坏整个内容流。

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

Answer 1

你仍然可以使用绝对位置，只需添加一个位置相对的容器像这样：`

<span style="position:relative">
    <span style="position: absolute;">▼</span>
    <span style="position: absolute;">▲</span>
</span>

Answer 2

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/

Answer 3

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

Answer 4

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

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/

Answer 5

DEMO

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

<div class="wrapper">text
    <div class="fl"> 
    <a href="#" id="scrollUp">▲</a> <!-- </br> if you want-->
    <a href="#" id="scrollDown">▼</a>
    </div>
</div>

Answer 6

 <body>Name<span style=" position: absolute;text-size:50% ">&#9660;</span><span style=" position: absolute;text-size:50% ">&#9650;</span></body>

如何用CSS重叠2个字符

6 个答案: