列表项目符号在Mozilla和IE中的间距比在Chrome中的间距更大

Question

以下是我的HTML：

<div id="text_style">
<div id="text_style_in">
<ul>
    <li>
    <p><a href="#" target="_self">Fact Sheet</a></p>
    </li>
    <li>
    <p><a href="#" target="_self">Facilities and Administrative (F&amp;A) Cost Agreements</a></p>
    </li>
    <li>
    <p><a href="#" target="_self">PropStart</a></p>
    </li>
    <li>
    <p><a href="#" target="_self">Equipment Matching</a></p>
    </li>
    <li>
    <p><a href="#" target="_self">Training Guide: Preparing Research Proposal Budgets</a></p>
    </li>
    <li>
    <p><a href="#" target="_self">Three Work-Day Rule</a></p>
    </li>
</ul>
</div>
</div>

我没有唯一定义的列表样式。 如何使列表在Mozilla和IE中看起来相似？

Answer 1

您应该删除de <p>标记，并按照以下方式进行删除：

<ul>
  <li><a href="#" target="_self">one</a></li>
  <li><a href="#" target="_self">two</a></li>
</ul>

Answer 2

您的html中嵌套了每个<p>元素的<li>元素。

你改为写：

<ul>
<li><a href="#" target="_self">Fact Sheet</a></li>
<li><a href="#" target="_self">Facilities and Administrative (F&A) Cost Agreements</a></li>
<li><a href="#" target="_self">PropStart</a></li>
<li><a href="#" target="_self">Equipment Matching</a></li>
<li><a href="#" target="_self">Training Guide: Preparing Research Proposal Budgets</a></li>
<li><a href="#" target="_self">Three Work-Day Rule</a></li>
</ul>

但是如果你想简单地保留<p>元素。使用ul li p {display: inline-block}使其成为内联块，并且行不应该中断...