1

順序付けされていないリストを2つのテキストセクションにフォーマットしたいと思います。私はグーグルでこれを行う方法を見つけようとしてきました。しかし、誰もが自分のリストを左から右に流すことに興味を持っているようです。それは私がやりたいことではありません。私が探しているのは、次のようにする方法です。

 Food                Calories

 Fruit
    -Apple            90
    -Grape            5
    -Berries          
       -Strawberry    16
       -Blueberry     9
 Vegetable
    -Cucumber         12
    -Onions            
       -Red           29
       -White         34
       -Vidalia       47

これは、順序付けされていないリストとCSSで可能ですか？<li>拡大縮小したいので、テーブルは使いたくないです。

編集：うまくいけば、厳密に表形式のデータというよりも、拡張/縮小階層のように見えるようになります。テーブルを使用してこれを行うことは可能であると理解していますが、そのように階層を提示するのはあまり自然ではないようです。

4

6 に答える 6

5

次のHTMLを使用すると、これを実行できます（そして、率直に言って、他のHTMLを使用すると、これを実行できます...）が、テーブルを使用する必要があります。

とにかく、そうは言っても、私が使用しているHTMLは次のとおりです。

<ul>
    <li class="head">
        <span class="col1">Food</span>
        <span class="col2">Calories</span>
    </li>
    <li>Fruits
        <ul>
            <li>
                <span class="col1">Apple</span>
                <span class="col2">90</span>
            </li>
            <li>
                <span class="col1">Grape</span>
                <span class="col2">5</span>
            </li>
            <li>
                <span class="col1">strawberry</span>
                <span class="col2">16</span>
            </li>
        </ul></li>
    <li>Vegetable
        <ul>
            <li>
                <span class="col1">Cucumber</span>
                <span class="col2">12</span>
            </li>
            <li>
                <span class="col1">Onion</span>
                <span class="col2">29</span>
            </li>
        </ul></li>
</ul>​

そしてCSS：

li.head {
    font-weight: bold;
}
span.col1,
span.col2 {
    display: inline-block;
    width: 48%;
}

ul > li > ul > li {
    padding-left: 10%;
    height: 0;
    line-height: 0;
    overflow: hidden;
    -webkit-transition: all 1s linear;
}

ul > li:hover > ul > li {
    height: 2em;
    line-height: 2em;
    -webkit-transition: all 1s linear;
}

ul > li > ul > li span:first-child::before {
    content: '-';
    width: 40%;
}

li li:nth-child(odd) span {
    background-color: #aaf;
}
​

JSフィドルデモ。

キーボードナビゲーションを可能にし、タブイベントに応答してネストされた食品/カロリー値を表示できるようにするために、HTMLを少し修正してfruits、vegetableテキストをa要素でラップしました。

<ul>
    <li class="head">
        <span class="col1">Food</span>
        <span class="col2">Calories</span>
    </li>
    <li><a href="#">Fruits</a>
        <ul>
            <li>
                <span class="col1">Apple</span>
                <span class="col2">90</span>
            </li>
            <li>
                <span class="col1">Grape</span>
                <span class="col2">5</span>
            </li>
            <li>
                <span class="col1">strawberry</span>
                <span class="col2">16</span>
            </li>
        </ul></li>
    <li><a href="#">Vegetable</a>
        <ul>
            <li>
                <span class="col1">Cucumber</span>
                <span class="col2">12</span>
            </li>
            <li>
                <span class="col1">Onion</span>
                <span class="col2">29</span>
            </li>
        </ul></li>
</ul>​

次のCSSを使用します。

li.head {
    font-weight: bold;
}

li a {
    color: inherit;
    text-decoration: none;
}

span.col1,
span.col2 {
    display: inline-block;
    width: 48%;
}

ul > li > ul > li {
    padding-left: 10%;
    height: 0;
    line-height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

ul > li a:focus + ul > li,
ul > li:hover > ul > li {
    height: 2em;
    line-height: 2em;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

ul > li > ul > li span:first-child::before {
    content: '-';
    width: 40%;
}

li li:nth-child(odd) span {
    background-color: #aaf;
}
​

JSフィドルデモ。

ただし、これらは両方とも、自動的に非表示にし、ユーザーの操作に基づいて表示することを前提としています。その仮定が正しくない場合、遷移は必要ありません。

ちなみに、アコーディオンのようなtable解決策：

<table>
    <colgroup>
        <col class="foods" />
        <col class="calories" />
    </colgroup>
    <thead>
        <tr>
            <th>Food</th>
            <th>Calories</th>
        </tr>
    </thead>
    <tbody>
        <tr class="header">
            <td colspan="2">Fruits</td>
        </tr>
        <tr>
            <td>Apple</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Grape</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Strawberry</td>
            <td>16</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="header">
            <td colspan="2">Vegetable</td>
        </tr>
        <tr>
            <td>Cucumber</td>
            <td>12</td>
        </tr>
        <tr>
            <td>Onion</td>
            <td>29</td>
        </tr>
    </tbody>
</table>

CSS：

.foods,
.calories {
    width: 8em;
}

tbody tr.header {
    height: 2em;
    line-height: 2em;
}

tbody tr,
tbody tr td {
    max-height: 0;
    line-height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

tbody tr td:first-child {
    padding-left: 2em;
}

tbody tr.header td {
    padding: 0;
}

tbody:hover tr {
    height: 2em;
    max-height: 2em;
    line-height: 2em;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
​

JSフィドルデモ。

これは、ヘッダーにカーソルを合わせて非表示のコンテンツを表示することで可視性を制御するという、以前と同じ仮定を行います。

そして、キックのためだけに、要素の属性をtab使用して、キーボードナビゲーション（を使用）を追加します。tabindextr.header

<table>
    <colgroup>
        <col class="foods" />
        <col class="calories" />
    </colgroup>
    <thead>
        <tr>
            <th>Food</th>
            <th>Calories</th>
        </tr>
    </thead>
    <tbody>
        <tr class="header" tabindex="1">
            <td colspan="2">Fruits</td>
        </tr>
        <!-- unchanged from the previously-posted table mark-up -->
    </tbody>
    <tbody>
        <tr class="header" tabindex="2">
            <td colspan="2">Vegetable</td>
        </tr>
        <!-- unchanged from the previously-posted table mark-up -->
    </tbody>
</table>

およびCSS：

/* Other CSS remains the same */
tr.header:focus ~ tr,
tbody:hover tr {
    height: 2em;
    max-height: 2em;
    line-height: 2em;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

tr.header:focus {
    outline: none;
    font-style: italic;
    background-color: #ffa;
}
​

JSフィドルデモ。

于 2012-11-19T18:10:14.300 に答える
2

このようにしてみてください。私は同じテクニックを使って流動的なレストランメニューを作りました。

ul { width:20em;} 
ul:first-child {font-weight: 700}
ul ul {font-weight: 400}

ul span:first-child { padding-left:1em;}
ul span + span { float:right;}

<ul>
    <li>fruit</li>
    <ul>
        <li><span>apple</span><span>90</span></li>
        <li><span>grappe</span><span>5</span></li>
        <li><span>strawberry</span><span>16</span></li>
        <li><span>etc</span><span>5.25</span></li>        
    </ul>
    <li>vegetable</li>
    <ul>
        <li><span>cucumber</span><span>12</span></li>
        <li><span>Onion</span><span>29</span></li>   
    </ul>    
</ul>

ここでそれを見てください：デモ

于 2012-11-19T18:19:59.150 に答える
2

これは実際には表形式のデータであるため、表を使用しても問題ありません。

ただし、これを行うことはできます：http: //jsfiddle.net/eFmtR/

ul {
 width:300px;
}
ul li {
 width:150px;
 float:left;
 text-align:center;
}

strong {
 font-weight:bold;
}


<ul>
 <li><strong>Food</strong></li>
 <li><strong>Calories</strong></li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
</ul>
于 2012-11-19T17:04:50.567 に答える
1

私はこのようなことをします：

CSS

  .foods{border:1px solid red;overflow: hidden;width:310px;}
        ul li{list-style: none;}
        ul li.dash:before{content:"-";}
            .fruit{float:left;width:150px;}
            .calories{float:left;width:150px;}

HTML

<div class="foods">
        <div class="fruit">
            <h3>Food</h3>

                <h3>Fruits</h3>
                <ul>
                    <li class="dash">Apple</li>
                    <li class="dash">Grape</li>
                    <li class="dash">Strawberry</li>
                </ul>
                <h3>Vegetable</h3>
                    <ul>
                    <li class="dash">Cucumber</li>
                    <li class="dash">Onion</li>

                </ul>


        </div>
        <div class="calories">
            <h3>Calories</h3>
            <div>
                <h3>&nbsp;</h3>
                <ul>
                    <li>90</li>
                    <li>15</li>
                    <li>16</li>
                </ul>
                <h3>&nbsp;</h3>
                <ul>
                    <li>12</li>
                    <li>29</li>

                </ul>
            </div>
        </div>
    </div>

デモ

于 2012-11-19T17:51:45.030 に答える
0

私はあなたが何を達成しようとしているのか知っていますが、これを行うためにjQueryを実装することはできますが、それはあなたの使用法に依存します。@BillyMoatからの回答は、結果を2つの列に表示することを扱いますが、結果を展開/折りたたむ場合は、jQueryアコーディオンをデプロイできます：http：//docs.jquery.com/UI/API/1.8/Accordion

于 2012-11-19T17:27:23.657 に答える
0

JavaScriptを使用しないソリューションの1つとして、新しいcolumn-countCSSプロパティを使用してみてください。IEに注意してください。ただし、IE10 +でない限り、サポートされません。http ://caniuse.com/multicolumn

ul {
     -webkit-column-count: 3; /* Beware of IE Problems */
}

これはデータを完全に「分割」するわけではないかもしれませんが、このページにアクセスする他の人にとっては調査する価値があります。

于 2013-11-22T15:59:51.533 に答える