0

我想要一个灰色框中的三列列表：

<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>由于过去的设计，使用 of 已经被“妖魔化”了，但在您的情况下，使用它不仅更简单而且更正确，因为您将使用为您的问题创建的标签。

这是一个小提琴的代码，演示了我在说什么。

<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 回答