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

Maybe this will help. Use a icon font instead of html symbols. https://github.com/aristath/elusive-iconfont

You can also visit a demo page at: http://shoestrap.org/downloads/elusive-icons-webfont/

Alternatively, try http://fortawesome.github.io/Font-Awesome/

Both font sets have up/down carets, but not in one symbol.

于 2013-04-26T15:05:35.837 回答
0

You may have a minimum font size setting in Firefox, preventing the effect of setting font size to 5 pixels. In general, if you need a font size that small, you really need a different approach.

The size of the characters ▲▼ greatly varies by font, and so does their spacing, so you should have a font-family setting for them that suits your needs, possibly a rather large list of fonts, just to be sure (after all, no font is present in all computers).

于 2013-04-26T16:47:33.297 回答
0

You could try the following:

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

with the following 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;
}

I would use an inline-block to position the two arrows, a bit easier to style and simpler mark-up (fewer tags).

You can set a font-size for the icon either using relative or absolute units depending on your site's styling.

Use vertical-align to position the icon vertically, I used middle, but top, bottom, baseline and other options are available, again depends on your preference.

If you need to move the two symbols close together, you need to wrap them in another tag and adjust the positioning.

I constructed two examples, one basic and the other fancy with more tags to control arrow positioning.

You can also adjust the padding, width, margin of the inline-block for a lot more control.

Fiddle: http://jsfiddle.net/audetwebdesign/XPQPh/

于 2013-04-26T15:06:10.797 回答