でCSSを取り扱うこ砂時計-ようなものですか。

StackOverflow https://stackoverflow.com/questions/2096639

  •  21-09-2019
  •  | 
  •  

質問

いています厳しい時間を考え、解決の問題です。
私の例では、最初の

Navigation Interface - Hourglass like

状況
私は26項目(この例では、一般的には知らない..)が12で一度に可視..私はあなたのナビゲーション（グリーンボックス

幅紫や緑箱で固定で高い紫によって異なります。

すべては正常にできない。

を使って順序付けリストの浮品)も項目として指定を <li> 要素としてのナビゲーションです。最初はfloat左目floatます。すべてのフローの他の項目の時間のムーブメントのカバーです。

問題
今はさんありがとうございます。緑の項目の列（または最後の場合にはそのこととなります二段）

こういうことができるように隠最初のX要素の次のXおよびこれらの位置を自..

る箇所は位置の一部（緑色のもの）などをどのように制御すべきかという位置ができるの妨げに流れから、新しいだろうか。

これは明らかでない。なお、提供させていただきまき..

もったいなかった作品

  • に移動して緑の項目負の下マージン、または正のトップマージンを示した。その場所その他の要素はその位置にします。
  • を用い絶対位置が、その要素を完全に削除の流れに影響を及ぼすものではないその他の要素としては重なっている他の要素..

[そのideプラグインで淡色表示の項目が隠されているので、っていう存在し..]

一部コードします。 

<style type="text/css">
    ul,li{padding:0;margin:0; list-style-type:none;}
    ul{
        width:155px;
        position:relative;
        height:125px;
        border:1px solid red;
    }
    li{
        float:left;
        background-color:purple;
        margin-left:5px;
        margin-top:5px;
        width:25px;
        text-align:center;
        line-height:25px;
        color:white;
    }
    .prev{
        color:black;
        background-color:green;
    }
    .next{
        color:black;
        float:right; 
        margin-right:5px;
        background-color:green;
    }
</style>

や

<body>
    <ul>
        <li class="prev">&lt;</li>
        <li class="next">&gt;</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
    </ul>
</body>
役に立ちましたか？

解決

OKこれは明らかでは解決できないだけでCss/Html..

なので、これを解決するために、一部CSS（ インライン-ブロック crossbrowser 一jQuery移動のナビゲーションボタンの周りになっていをしてほしい..

参考にこちらがソリューション..

CSS

<style type="text/css">
    ul,li{padding:0;margin:0; list-style-type:none;}
    #performances{
        width:155px;
        border:1px solid red;
        line-height:0;
        font-size:0;
    }
    #performances li{
        font-size:12px;
        background-color:purple;
        margin-left:5px;
        margin-bottom:5px;
        margin-top:5px;
        width:25px;
        text-align:center;
        line-height:25px;
        color:white;
        display:none;
        vertical-align:top;
    }
    #performances .prev{
        color:black;
        background-color:green;
        display: -moz-inline-stack;
        display:inline-block;
    }
    #performances .next{
        color:black;
        background-color:green;
        display: -moz-inline-stack;
        display:inline-block;
    }
    #performances .shown{
        display: -moz-inline-stack;
        display:inline-block;
    }
    #performances .placeholder{visibility:hidden;}
</style>
<!--[if lte IE 7]><style>
    #performances .prev,#performances .next,#performances .shown{zoom:1;*display:inline;}
</style><![endif]-->

Javascript(jQuery)

<script type="text/javascript">
    function resetNextPrev( ){
        $next.insertAfter('#performances li.shown:eq('+ ($perpage-1) +')');
        $prev.insertAfter('#performances li.shown:eq('+ ($perline-1) +')');
    }
    $(document).ready(function(){
        $perpage = 8;
        $perline = ($perpage+2) / 2;
        $page = 1;
        $itemcount = $('#performances li.performance').length;
        $pages = Math.ceil ( $itemcount / $perpage);
        $next = $('#performances li.next');
        $prev = $('#performances li.prev');

        $('#performances li.performance').slice(0,$perpage).addClass('shown');

        if (($pages * $perpage) > $itemcount )
                for (var i =0;i< ($pages * $perpage)-$itemcount;i++) 
                        $('<li class="performance placeholder">test</li>').appendTo('#performances');
        resetNextPrev();

        $('li.next').click(function(){
            if ($page < $pages)
                $('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (++$page-1),$perpage * $page).addClass('shown');
            resetNextPrev( $perline );

        });
        $('li.prev').click(function(){
            if ($page > 1)
                $('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (--$page-1),$perpage * $page).addClass('shown');
            resetNextPrev( $perline );

        });
    });
</script>

..の HTML

    <ul id="performances">
        <li class="prev">&lt;</li>
        <li class="next">&gt;</li>
        <li class="performance">1</li>
        <li class="performance">2</li>
        <li class="performance">3</li>
        <li class="performance">4 dfs s sf</li>
        <li class="performance">5</li>
        <li class="performance">6</li>
        <li class="performance">7</li>
        <li class="performance">8</li>
        <li class="performance">9</li>
        <li class="performance">10</li>
        <li class="performance">11</li>
        <li class="performance">12</li>
        <li class="performance">13</li>
        <li class="performance">14</li>
        <li class="performance">15</li>
        <li class="performance">16</li>
        <li class="performance">17</li>
        <li class="performance">18</li>
        <li class="performance">19</li>
    </ul>

カップルのハードコード値内で休業させていただきで誰が迎えに新しいことからこの...

みんなのための指導:)

作業例 (のための誰が見たいのでアクショ) : http://www.jsfiddle.net/gaby/Ba3UT/

他のヒント

この複雑な状況ではJavaScriptを使用して価値があるかもしれません。 jQueryのようなライブラリは、それはかなり無痛作ることができます。 jsの中で明示的にこれらのラッピング規則を定義するCSSルールの多くの暗黙のうちにそれを行うよりも維持するために、明確かつ容易になります。

liとしてナビゲーションもの以外display: inline-blockを作成し、おそらくリストの最後にナビゲーションliを移動する？

あなたのコードを見ることなく、私は確認することはできません。ただし、タグに緑の要素を入れ、クリアとしてそれらをマークしようとしている：両方;？しかしこれは3行目にそれらを移動することがあります。それはあなたがチェックアウトすべきものである。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top