1

特定のテーブル列がソート可能であることを示す▲▼記号が必要です（たとえば、名前▲▼ですが、矢印が互いに重なっています）。それを1行にまとめるために、リストを使用しました：

<table class="test">
  <tr><th>test <ul><li>&#9650;</li><li>&#9660</li></ul></th></tr>
</table>

矢印が大きすぎて、間隔が悪い。だから、私が使用した結果をスタイルするには：

   th ul{
        display:inline-block;
   }

.test th ul{
    font-size:5px;
    margin:0;
    padding:0;
}
.test th li{
    font-size:5px;
    margin:0;
    padding:0;
}

これは結合された文字を小さくすることを意図していましたが、font-size はシンボルのサイズにまったく影響を与えないようです。これはどのように行うべきですか？

編集:これは Opera で完全に機能するようになり、これはいくつかの Firefox (私のバージョンは 32 ビット Linux 20.0 のもの) 固有の問題であると思われます。実際には、矢印のサイズに影響するだけです:

  <p>&#9650;</p>

body{
    font-size:5px;
}

これでも大きな矢印が表示されます。他の誰かがそれがFirefoxのみの問題であることを確認できますか?

これは奇妙です。おそらく、画像を使用するだけです。

4

3 に答える 3

1

多分これが役立つでしょう。HTML シンボルの代わりにアイコン フォントを使用します。https://github.com/aristath/elusive-iconfont

次のデモページにアクセスすることもできます: http://shoestrap.org/downloads/elusive-icons-webfont/

または、 http://fortawesome.github.io/Font-Awesome/を試してください

両方のフォント セットにアップ/ダウン キャレットがありますが、1 つの記号にはありません。

于 2013-04-26T15:05:35.837 に答える
0

次のことを試すことができます。

<table class="test">
  <tr><th>test <span class="icon-sortable">&#9650;<br>&#9660;</span></th></tr>
</table>

次の CSS を使用します。

th {
    outline: 1px dotted blue;
    font-size: 1.00em;
}
.icon-sortable {
    outline: 1px dotted gray;
    display: inline-block;
    font-size: 0.50em;
    vertical-align: middle;
}

インライン ブロックを使用して 2 つの矢印を配置すると、スタイルが少し簡単になり、マークアップが簡単になります (タグが少なくなります)。

サイトのスタイルに応じて、相対単位または絶対単位を使用して、アイコンのフォント サイズを設定できます。

アイコンを垂直に配置するために使用vertical-alignします。私は中央を使用しましたが、上、下、ベースライン、およびその他のオプションを使用できます。これも好みに応じて異なります。

2 つのシンボルを近づける必要がある場合は、それらを別のタグで囲み、位置を調整する必要があります。

私は 2 つの例を作成しました。1 つは基本的なもので、もう 1 つは矢印の配置を制御するタグを追加した凝ったものです。

インラインブロックのパディング、幅、マージンを調整して、より多くの制御を行うこともできます。

フィドル: http://jsfiddle.net/audetwebdesign/XPQPh/

于 2013-04-26T15:06:10.797 に答える
0

Firefox で最小フォント サイズが設定されている可能性があり、フォント サイズを 5 ピクセルに設定しても効果がありません。一般に、それほど小さいフォント サイズが必要な場合は、実際には別のアプローチが必要です。

文字のサイズ ▲▼ はフォントによって大きく異なり、間隔も同様に異なるためfont-family、ニーズに合った設定を行う必要があります。すべてのコンピュータに存在します)。

于 2013-04-26T16:47:33.297 に答える