将 <table> 放在 <dl> 的 <dd> 内会对我页面的其他元素产生不利影响

Question

我使用的是两列布局，页眉和粘性页脚仅在右侧。我右栏的内容区域有一个部分和一个内联显示的旁边。

我正在尝试创建一个常见问题页面。我正在使用问题和答案的描述列表，并在列表底部有一个 link 以返回顶部。

对于其中一个答案（描述数据），我想添加一个table的信息。我试着用 table 代替 "dd"，然后试着把它放在 "dd" 中。无论哪种方式，table 都会出现在 "Go to Top" link 下方，并导致我的页脚在页面上上升并覆盖其他信息。

有没有办法让 table 成为 "dd" 的一部分而没有这些不利影响？如果没有，还有什么其他可行的解决方案来格式化此页面？

以下是页面受影响区域的代码：

常见问题解答

    <dl>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question.</dd>
    <br>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question.</dd>
    <br>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question.</dd>
    <br>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question.</dd>
    <br>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question. Table below is                further explanation of answer.</dd>
    <dd>
    <table style="width: 600px; border:none;">
    <tr><th><a style="font-weight:bold;"><em>Header 1:</em></a></th></tr>
    <tr><th><a style="font-variant:small-caps; letter-spacing: 1px;"><em> Header 2 </em></a></th><td>- information0 for up to 3 hours of play</td>        </tr>
     <tr><th><a style="font-variant:small-caps; letter-spacing: 1px;"><em> Header 3 </em></a></th><td>- information</td></tr>         
     <tr><th>  </th><td>- information</td></tr>
     <tr><th>  </th><td>- nformation</td></tr>
     <tr><th>  </th><td>- information</td></tr>
     <tr><th>  </th><td>- information</td></tr>
     <tr><th>  </th><td>- information</td></tr>
     <tr><th>  </th><td>- information</td></tr>
     <tr><th><a style="font-variant:small-caps; letter-spacing: 1px:"><em> Header 4 </em></a></th><td>- information</td></tr>
     </dd>
     <br>
    </dl>
    <a href="#top">Go to top</a>
    </section>

    <aside><h2>Comments</h2>
    <div class="blockquote"><blockquote><q> love You Two!</q></blockquote>        </div>
    <p class="name">person</p>
    <div class="blockquote"><blockquote><q>I love You Two!</q></blockquote></div>
    <p class="name">person</p>
    <div class="blockquote"><blockquote><q>I love You Two!</q></blockquote></div>
    <p class="name">person</p></aside>
    <div id="footer">
    <div>&copy;Copyright 2015. All Rights Reserved.</div>
    </div>

Answer 1

您没有关闭打开的 <table> 标签。在 </dd> 之前使用 </table> 关闭它。代码将是

<dl>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question.</dd>
<br>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question.</dd>
<br>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question.</dd>
<br>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question.</dd>
<br>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question. Table below is                further explanation of answer.</dd>
<dd>
<table style="width: 600px; border:none;">
<tr><th><a style="font-weight:bold;"><em>Header 1:</em></a></th></tr>
<tr><th><a style="font-variant:small-caps; letter-spacing: 1px;"><em> Header 2 </em></a></th><td>- information0 for up to 3 hours of play</td>        </tr>
 <tr><th><a style="font-variant:small-caps; letter-spacing: 1px;"><em> Header 3 </em></a></th><td>- information</td></tr>         
 <tr><th>  </th><td>- information</td></tr>
 <tr><th>  </th><td>- nformation</td></tr>
 <tr><th>  </th><td>- information</td></tr>
 <tr><th>  </th><td>- information</td></tr>
 <tr><th>  </th><td>- information</td></tr>
 <tr><th>  </th><td>- information</td></tr>
 <tr><th><a style="font-variant:small-caps; letter-spacing: 1px:"><em> Header 4 </em></a></th><td>- information</td></tr>
 </table> <!-- You missed  out this tag -->
 </dd>
 <br>
</dl>
<a href="#top">Go to top</a>
</section>

<aside><h2>Comments</h2>
<div class="blockquote"><blockquote><q> love You Two!</q></blockquote>        </div>
<p class="name">person</p>
<div class="blockquote"><blockquote><q>I love You Two!</q></blockquote></div>
<p class="name">person</p>
<div class="blockquote"><blockquote><q>I love You Two!</q></blockquote></div>
<p class="name">person</p></aside>
<div id="footer">
<div>&copy;Copyright 2015. All Rights Reserved.</div>
</div>

将 <table> 放在 <dl> 的 <dd> 内会对我页面的其他元素产生不利影响

Placing a <table> within a <dd> of a <dl> adversely affects other elements of my page

html

html-table

html-lists

常见问题解答