Question

一个关于ul li 的css布局问题

请问我想用css来达到以下效果改什么写：
<ul>
<li>111
<li>222
<li>333
<ul>
比如111 222 333是3个菜单名，放在一个固宽度的图片上（比如200px）
然后3个名字要两边对齐，之间的间隔也要相同
111 222 333
—————————————— 就是111要贴着左边，333要贴着右边，如果要让它们自动排列，应该怎么写啊， 111 222 333只是个比方，可能有111 222 333 444 555 666或者名字长短不一致11 22222222222 333之类的。。。。
类似于word的分散对齐功能
我描述的比较抽象，希望大家给点意见，谢谢啦~~~
1楼说的有点抽象。。。。2楼那个是我以前用的。。。但是客户比较单纯不会自己设置margin还喜欢改菜单名。。。所以需要自动调整。。。。。。。。

3个的宽度是会变换的。。。。但是下面的总宽度不会变。。。

客户乱提要求啊，li所以会改变。。。。

谢谢3楼的详细答案。。。但是这个只使用3个的。。。。如果是5个 6个呢。。。

Answer 1

第一，用ul li
第二，li{float:left; margin-left:10px; margin-right:10px;}
这个10数值，你自己看着定
总之，浮动+margin(或padding)

Answer 2

<style>
ul{width:200px; text-align:center;margin:0; padding:0;}
li{ list-style:none;width:auto; margin:0; padding:0;}
ul .s{margin:0 auto;}
</style>

<ul>
<li style="float:left">111</li>
<li style="float:right;">333</li>
<li class="s">2222222222</li>
<li style="clear:both;"></li>
</ul>
我试过了，可以的呢!

Answer 3

给li定一个固定宽度吧，两边对齐不太好实现
另外，你的代码没有关闭，应该是：
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>

Answer 4

拿3个宽度为100px的li为例
样式
li{float:left;margin-right:20px; width:100px}
结构
<div style="overflow:hidden;width:340px">
<ul>
<li>111</li>
<li>2222222</li>
<li>333</li>
<ul>
</div>

Answer 5

利用相对定位里面的绝对定位。

如果你看完上面的文字就懂，那就很好。
如果不懂，估计我再写更多的文字也是白搭。