0

灰色のボックス内に 3 列のリストが必要です。

<div style="width:500px;font-size:21px;background:#f5f5f5;margin:0 0 40px 100px;padding:1px;border:3px solid black;">
  <div style="text-align:center;margin:10px 0px 0px 0px;"><strong>Table of Contents</strong></div>
  <ul style="float:left;width:33%;list-style-type:none;">
   <li>Book 1.</li>
   <li>Part 1.</li>
   <li><a href="#S1">Section 1.</a></li>
   <li><a href="#S2">Section 2.</a></li>
   <li><a href="#S3">Section 3.</a></li>
  </ul>
  <ul style="float:left;width:33%;list-style-type:none;">
   <li>Book 2.</li>
   <li>Part 1.</li>
   <li><a href="#S4">Section 1.</a></li>
   <li><a href="#S5">Section 2.</a></li>
   <li><a href="#S6">Section 3.</a></li>
  </ul>
  <ul style="float:left;width:33%;list-style-type:none;">
   <li>Book 3.</li>
   <li>Part 1.</li>
   <li><a href="#S7">Section 1.</a></li>
   <li><a href="#S8">Section 2.</a></li>
   <li><a href="#S9">Section 3.</a></li>
  </ul>
</div>

しかし、結果はきれいではありません: http://jsfiddle.net/gq2gh/

誰が何が起こっているのか説明したり、修正したりできますか? ありがとう。

4

2 に答える 2

2

<table>わかりました、誠意を持って言えば、あなたの意図がテーブルを作成することである場合は、なぜ a を使用しないのですか? 単純なタグで目的が達成できるのに、なぜ CSS を使用するのでしょうか?

<table>の使用は、過去の設計のために一種の「悪魔化」されていることを知っていますが、あなたの場合、問題のために作成されたタグを使用するので、それを使用する方が簡単であるだけでなく、より正確です。

これは、私が話していることを示すフィドルのコードです。

<div class="outer_box">
    <table>
        <tr>
            <th colspan="3">Table of Contents</th>
        </tr>
        <tr>
            <td>
                <ul style="list-style-type:none;">
                    <li>Book 1.</li>
                    <li>Part 1.</li>
                    <li><a href="#S1">Section 1.</a></li>
                    <li><a href="#S2">Section 2.</a></li>
                    <li><a href="#S3">Section 3.</a></li>
                </ul>
            </td>
            <td>
                <ul style="list-style-type:none;">
                    <li>Book 2.</li>
                    <li>Part 1.</li>
                    <li><a href="#S4">Section 1.</a></li>
                    <li><a href="#S5">Section 2.</a></li>
                    <li><a href="#S6">Section 3.</a></li>
                </ul>
            </td>
            <td>
                <ul style="list-style-type:none;">
                    <li>Book 3.</li>
                    <li>Part 1.</li>
                    <li><a href="#S7">Section 1.</a></li>
                    <li><a href="#S8">Section 2.</a></li>
                    <li><a href="#S9">Section 3.</a></li>
                </ul>
            </td>
        </tr>
    </table>
</div>
于 2013-09-15T05:12:25.030 に答える
1

を使用してwidth:33%います。33% は<body>タグに関連しているため、列が広すぎます。で絶対幅を指定しpxます。

于 2013-09-14T22:14:31.913 に答える