如何用CSS重疊2個字符

我有2個Unicode箭頭，我希望在另一個之上（例如作爲列分類器）。如何用CSS重疊2個字符

我該怎麼做？ - 一個範圍內的<br>標記不起作用，因爲它會打破整個內容流。

我也不能設置position:absolute和top 0，left 0，因爲它需要相對定位。

見琴： http://jsfiddle.net/YrJTN/1/

來源

2013-08-23 Alex

什麼是你真正想讓這個樣子呢？「在另一個之上」是不明確的，這反映在當前刪除的答案之一中。 – thirtydot

我希望得到排序箭頭ALA http://tablesorter.com/docs/（除了用unicode而不是圖像） – Alex

您仍然可以使用位置是絕對的，只是添加具有相對位置這樣的容器：`

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

來源

2013-08-23 11:11:28

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-23 11:14:08

垂直對準和負邊緣的組合：

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-23 11:14:09 pawel

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-23 11:14:24

你應該在'em'單元中設置'top'，這樣它可以處理任何字體大小： http://jsfiddle.net/thirtydot/YrJTN/5/ – thirtydot

和關於箭頭的鏈接？ –

這將是一個問題。 –

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>

來源

2013-08-23 11:16:21

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

來源

2013-08-23 11:18:43 neel

請嘗試在答案中加入某種解釋，以及實際的代碼。 :) – Spudley

如何用CSS重疊2個字符

回答

相關問題