0

Is it possible to align multiple distinct unordered lists by the last letter of the text they contain, given they all have the same class? I've tried changing the direction, text-align, text-align-last, but nothing seems to make all the unordered lists line up correctly. That is, the output could look like:

  AAAAAAAAAA   IMAGE    XXXXX   YYYYY   ZZZZZ

     BBBBBBB   IMAGE    XXXXX   YYYYY   ZZZZZ

    CCCCCCCC   IMAGE    XXXXX   YYYYY   ZZZZZ

Anyway, here's my current actual output:

jsfiddle.net/yyjjjzzt/

As you can see, the green AAAAAAA is out of line with the multiple NEWS elements, displacing the image next to it and the red Eggs, Cheese, Vegetables, and Fruit elements as well (the red elements are supposed to be centered and not aligned to the right).

Relevant code, here's the 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;

}

And here's the 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>

The "leads" class doesn't actually do anything, I just haven't removed it yet. So, any suggestions?

javascriptwillbetheendofme
  • 13
  • 5

1 Answers1

0

Here is one possible approach. Modify your CSS as follows:

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

If you assign a length to the first li element, you can then align the text to the right and get the alignment that you want. Use display: inline-block instead of inline gives better results.

See fiddle: http://jsfiddle.net/audetwebdesign/k825yy8k/

Note: Be sure to close all your li tags otherwise you may get slightly skewed results that are offset by a few pixels.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • That almost worked out for me. Just one problem: when the elements on the right side aren't all identical, the whole thing gets shifted again. Here's the fiddle: http://jsfiddle.net/k825yy8k/5/ Is it possible to ignore trying to align the right half in columns and to just set a maximum width for all the red elements, and let overflow form new rows/be hidden/etc? Thanks again! – javascriptwillbetheendofme Jan 17 '15 at 22:50
  • after playing around it with more, I managed to get this to work: http://jsfiddle.net/k825yy8k/7/ which seems to fix the problem of the elements not being aligned on the right hand side. But suppose a very large term was given as an element in red, it would still cause the alignment to go haywire. Is there anyway to make the smaller elements show up on a new line afterwards, within a box of sorts? – javascriptwillbetheendofme Jan 17 '15 at 23:42