html - 按最后一个字母对齐无序列表元素？

Question

是否可以通过它们包含的文本的最后一个字母对齐多个不同的无序列表，因为它们都具有相同的类？我试过改变方向、文本对齐、文本对齐最后，但似乎没有什么能使所有无序列表正确排列。也就是说，输出可能如下所示:

  AAAAAAAAAA   IMAGE    XXXXX   YYYYY   ZZZZZ

     BBBBBBB   IMAGE    XXXXX   YYYYY   ZZZZZ

    CCCCCCCC   IMAGE    XXXXX   YYYYY   ZZZZZ

无论如何，这是我当前的实际输出:

jsfiddle.net/yyjjjzzt/

如您所见，绿色的 AAAAAAA 与多个 NEWS 元素不一致，取代了它旁边的图像以及红色的 Eggs、Cheese、Vegetables 和 Fruit 元素(红色元素应该居中并且没有右对齐)。

相关代码，这里是CSS:

 #navcontainer ul
{
margin: 10 auto;
padding: 0;
list-style-type: none;
text-align: center;

}

#navcontainer ul li { display: inline; }

#navcontainer ul li 
{
text-decoration: none;
padding: .2em 2em;
color: #fff;
/*background-color: #036;*/
}

#navcontainer ul li a{

    text-decoration: none !important;
    color: #61D961;

}

#navcontainer ul > li.alpha a{

text-decoration: none !important;
color: #61D961;
-moz-text-align: justify !important;
-moz-text-align-last: end !important;
direction: rtl;

}

这是 HTML:

 <div class="leads">
    <div id="navcontainer">
      <ul class="beta">
        <li class="alpha" ><a href="#" >News</a><img src="RIP2.png" align="absmiddle" style="padding-bottom: 1.5px" id="space"></li>
        <li id="test"><a href="#">Eggs</a></li>
        <li><a href="#">Cheese</a></li>
        <li><a href="#">Vegetables</a></li>
        <li><a href="#">Fruit</a></li>
      </ul>
      <div>&nbsp</div>
      <ul class="beta">
       <li class="alpha"><a href="#" >AAAAAA</a><img src="RIP2.png" align="absmiddle" style="padding-bottom: 1.5px" id="space">
    <li><a href="#">Eggs</a></li>
    <li><a href="#">Cheese</a></li>
    <li><a href="#">Vegetables</a></li>
    <li><a href="#">Fruit</a></li>
  </ul>
        <div>&nbsp</div>
  <ul class="beta">
   <li class="alpha"><a href="#">News</a><img src="RIP2.png" align="absmiddle" style="padding-bottom: 1.5px" id="space">
    <li><a href="#">Eggs</a></li>
    <li><a href="#">Cheese</a></li>
    <li><a href="#">Vegetables</a></li>
    <li><a href="#">Fruit</a></li>
  </ul>
        <div>&nbsp</div>
  <ul class="beta">
   <li class="alpha"><a href="#">News</a><img src="RIP2.png" align="absmiddle" style="padding-bottom: 1.5px" id="space">       
    <li><a href="#">Eggs</a></li>
    <li><a href="#">Cheese</a></li>
    <li><a href="#">Vegetables</a></li>
    <li><a href="#">Fruit</a></li>
  </ul>
        <div>&nbsp</div>
  <ul class="beta">
   <li class="alpha"><a href="#">News</a><img src="RIP2.png" align="absmiddle" style="padding-bottom: 1.5px" id="space">
    <li><a href="#">Eggs</a></li>
    <li><a href="#">Cheese</a></li>
    <li><a href="#">Vegetables</a></li>
    <li><a href="#">Fruit</a></li>
  </ul>
</div>

“leads”类实际上没有做任何事情，我只是还没有删除它。那么，有什么建议吗？

Answer 1

这是一种可能的方法。按如下方式修改您的 CSS:

#navcontainer ul li {
    display: inline-block;
}
#navcontainer ul li.alpha {
    width: 8em;
    text-align: right;
}

如果您为第一个 li 元素分配了一个长度，您就可以将文本右对齐并获得您想要的对齐方式。使用 display: inline-block 而不是 inline 可以获得更好的结果。

参见 fiddle :http://jsfiddle.net/audetwebdesign/k825yy8k/

注意:一定要关闭所有的 li 标签，否则您可能会得到稍微偏斜的结果，这些结果会偏移几个像素。