1

在 Play 2 中，有一个computer-database-jpa支持列排序的示例。默认按计算机排序，箭头表示排序顺序。我在另一个项目中需要这个 CSS 样式/箭头，但即使在检查了这个表头的 CSS 代码之后

<th class="name header headerSortDown">
    <a href="/computers?o=desc">Computer name</a>
</th>>

我还是看不到箭头是从哪里来的？对此有任何提示吗？谢谢！

在此处输入图像描述

更新：

可以在这里浏览 CSS：https ://github.com/playframework/Play20/tree/master/samples/java/computer-database-jpa/public/stylesheets

但是在例如 headerSortDown 我找不到看起来像箭头的东西）：

对于后续问题：

如何直接在文本旁边获取箭头？ 在此处输入图像描述

4

1 回答 1

1

最简单的方法是使用浏览器的检查工具（即 Firefox 中的 FireBug 或 Chrome 中的内置检查器）

这是箭头的独立摘录，您可以看到它们正在“绘制”带有 CSS 边框的箭头（不需要图像）

<!DOCTYPE html>
<html>
    <head>
        <title>Arrows a'la Twitter Bootstrap</title>
        <style type="text/css">

            .header {
                width: 200px;
                background-color: #c2ccd1;
                padding: 4px;
                margin: 2px;
            }

            .header:after {
                content: "";
                float: right;
                margin-top: 7px;
                visibility: hidden;
            }

            .headerSortDown:after, .header:hover:after {
                border-width: 0 4px 4px;
                border-style: solid;
                border-color: #000 transparent;
                visibility: visible;
            }

            .headerSortUp:after {
                border-bottom: none;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 4px solid #000;
                visibility: visible;
            }

        </style>
    </head>
    <body>
        <div class="header">Not selected</div>
        <div class="header headerSortDown">Arrow up (sorting ASC)</div>
        <div class="header headerSortUp">Arrow down (sorting DESC)</div>
    </body>
</html>

这是关于使用 CSS 边框绘制三角形的好教程。

编辑

DIV标记使用block显示，因此它会尝试使用全宽或 CSS 样式中给出的宽度（在上面的示例中200px），如果您将使用带有某些inline元素的箭头，A或者SPAN箭头将“粘”到文本上。当然，您也可以强制将 DIV 显示为内联，这是最简单的方法（通过修改示例）

声明：.header删除width并添加display: inline-block;：

.header {
    /* width: 200px; don't set width anymore */
    background-color: #c2ccd1;
    padding: 4px;
    margin: 2px;
    display: inline-block; /* force displaying DIV as an inline element */
}

要控制文本和箭头之间的空间，只需使用部分margin-left属性.header:after：

.header:after {
    content: "";
    float: right;
    margin-top: 7px;
    visibility: hidden;
    margin-left:4px; /* space between text and arrow for inline elements */
}

或者，如果您想在内联元素中为箭头保留一个空间（以避免悬停时更改宽度） - 您还可以添加透明的“箭头”

.header:after {
    content: "";
    float: right;
    margin-top: 7px;
    visibility: visible; /* make it visible by default */
    margin-left:4px; /* space between text and arrow for inline elements */
    border: 4px solid transparent; /* set borders to transparent, so they won't show */
}
于 2012-12-31T14:54:23.833 回答