Question

我想在无序列表中添加一些静态文本，以便文本与列表项的基线对齐。例如Page 1 2 3其中Page是静态元素，1,2,3是活动列表项。我尝试单独创建它们，但在IE 7中查看时存在对齐问题。

<div class="headB" id="page">Page</div>
<!-- TemplateBeginEditable name="pageNum" -->
<div class="headB" id="pageNum">
<ul> 
     <li><a href="../message3.html">3</a></li>
     <li><a href="../message2.html">2</a></li>
     <li><a href="../message1.html">1</a></li>
</ul>
</div>

我修改了代码，使其包含在1 div中，但IE 7将单词Page放在1和2之间

<div class="headB" id="pageNum">
<ul>
   <li><a href="../consumer1.html">2</a></li>
<li><a href="../consumer2.html">1</a></li>
<span class="headB">Page</span>
</ul>
</div>

Answer 1

我认为将<span>移到<ul>之外是个更好的主意。您不应该将span放在ul内，请参阅html lists。

<div class="headB" id="pageNum">
  <ul>
    <li><a href="../consumer1.html">2</a></li>
    <li><a href="../consumer2.html">1</a></li>
  </ul>
  <span class="headB">Page</span>
</div>

这样，span出现在所有浏览器（包括IE7）的换行符列表之后。如果要将其与列表对齐，请使用一些其他CSS。 JsFiddle example

将静态文本添加到无序列表

1 个答案: