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とともに使用するか、矢印がテキストに「接着」されます。もちろん、DIVをインラインとして強制的に表示することもできます。これを行う最も簡単な方法（サンプルを変更することにより）inlineASPAN

宣言の場合.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 に答える