Question

是否可以将多个不同的无序列表与它们包含的文本的最后一个字母对齐，因为它们都具有相同的类？我尝试过更改方向，text-align，text-align-last，但似乎没有任何东西可以使所有无序列表正确排列。也就是说，输出看起来像：

  AAAAAAAAAA   IMAGE    XXXXX   YYYYY   ZZZZZ

     BBBBBBB   IMAGE    XXXXX   YYYYY   ZZZZZ

    CCCCCCCC   IMAGE    XXXXX   YYYYY   ZZZZZ

无论如何，这是我目前的实际输出：

jsfiddle.net/yyjjjzzt /

正如您所看到的，绿色AAAAAAA与多个NEWS元素不相符，取代了它旁边的图像以及红色鸡蛋，奶酪，蔬菜和水果元素（红色元素应该居中并没有与右边对齐。）

相关代码，这里是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>

＆＃34;领导＆＃34;上课并没有真正做任何事情，我还没有把它删除。那么，有什么建议吗？

Answer 1

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

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

如果为第一个li元素指定长度，则可以将文本右对齐并获得所需的对齐方式。使用display: inline-block代替inline可以获得更好的结果。

请参阅小提琴：http://jsfiddle.net/audetwebdesign/k825yy8k/

注意：请务必关闭所有li标记，否则可能会略微偏斜几个像素的结果。

用最后一个字母对齐无序列表元素？

1 个答案: