1

私は 2 つの Unicode 矢印を持っていますが、それらを重ねて配置したいと考えています (例: 列ソーターとして)。

これどうやってするの？-<br>コンテンツ フロー全体が中断されるため、スパン内のタグは機能しません。

また、相対的に配置する必要があるため、設定position:absoluteして上に 0、左に 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 に答える