相关疑难解决方法(0)

你在HTML中的菜单栏上找到了很多教程,但是对于这个特定的(虽然是IMHO泛型)案例,我还没有找到任何合适的解决方案:

#  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  #
#  ^                                                                             ^  #

• 有不同数量的纯文本菜单项,页面布局流畅.
• 第一个菜单项应左对齐,最后一个菜单项应右对齐.
• 其余项目应在菜单栏上以最佳方式传播.
• 数量是变化的,因此没有机会预先计算最佳宽度.

请注意,TABLE也不适用于此:

• 如果您居中所有TD,则第一个和最后一个项目未正确对齐.
• 如果你左对齐并右对齐第一个resp.最后的项目,间距将是次优的.

使用HTML和CSS以干净的方式实现这一点并不是很奇怪吗？

考虑下面的jsfiddle:http://jsfiddle.net/mark69_fnd/yqdJG/1/

HTML:

<div id="container">
    <div class="char">
        AAA
    </div>
    <div class="char stickToRight">
        BBB
    </div>
</div>?

CSS:

#container {
    border:solid 2px green
}
.char { 
    display: inline-block;
    border: solid 2px red;
}
.stickToRight {
    float: right
}?

有没有另一种方法.stickToRight可以正确对齐,而不是浮动它？

我需要保持它,display:inline-block以便我可以使其垂直对齐与其他.char元素一致.

如何float:right在保持元素的同时实现右对齐效果display:inline-block？(注意,我不知道容器元素的宽度.)

我想要纯粹的CSS解决方案,如果有的话.