相关疑难解决方法(0)

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

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

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

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

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

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

我有这个CSS代码inline-block.任何人都可以告诉我如何使它在Internet Explorer 6和7中工作.任何想法？也许我做错了什么？谢谢!

#signup {
   color:#FFF;
   border-bottom:solid 1px #444;
   text-transform:uppercase;
   text-align:center;
}
#signup #left {
   display: inline-block
}
#signup #right {
   background-image:url(images/signup.jpg);
   border-left: solid 1px #000;
   border-right: solid 1px #000;
   display: inline-block; 
   padding:1% 2%
   width:16%;
}
#signup #right a { font-size:100%; font-weight:bold } 
#signup #right p { font-size:90%; font-weight:bold }
#signup a:hover  { color:#FFF; text-decoration:underline }

我们有一个自适应布局,其中一些列表元素水平显示:

| Li1 | Li2 | Li 3 | Li4 |

显然我可以设置

ul {width:100%}
ul li {width:25%}

随着浏览器更改大小而获得li的更改大小.但是,我们希望最左边的li的左边缘与左边缘对齐,最右边的li右边缘与右边缘对齐,即使浏览器展开也是如此.

Li1    Li2    Li3     Li4
|                       |

Li1      Li2      Li3       Li4
|                             |

Li1  Li2  Li3   Li4
|                 |

有没有办法用纯css做到这一点？

合理的文本http://i39.tinypic.com/2it4i3b.png

顶部显示Firefox/IE.底部是谷歌浏览器.请注意右边的小空间？

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>

ul {
    padding: 0;
    margin: 0;
    width: 300px; 
    list-style-type: none;
    text-align: justify;
    background-color: #00f;
}

ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

li {
    display: inline-block;
}

a {
    color: #fff;
}

http://jsfiddle.net/EtU9j/

这个小空间从哪里来？为什么不能证明冲洗到边缘？