当前位置：文江博客话题详情

CSS 样式导航按钮

发布于 2024-10-23 16:15:46 字数 341 浏览 1 评论 0原文

您可以在这里看到我正在尝试做的事情： http://rjlacount.com/clients/GreenTree /

我希望导航 li 自动确定填充，以便它们可以拉伸到内部包装器的整个宽度。因此，如果我添加另一个 li 或删除一个 li，它们仍然会居中，并且每个 li 的填充只会增加/减少以弥补它。

现在，我将最后一个导航 li 浮动到右侧，并为每个导航添加填充，以尝试使其尽可能接近全长。所以这几乎就是我想要的样子，但我想去掉最后两项之间的空格。

这可能吗？感谢您的任何帮助。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天暗了我发光 2024-10-30 16:15:46

我不相信这会在< IE8，但您始终可以使用条件样式表为这些浏览器提供 float 或 display: inline-block 后备。

示例

Example

CSS

ul {
    display: table; 
    width: 100%;
}

ul li {
    display: table-cell;
}

ul li a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center; 
}

jsFiddle。

jsFiddle 再加上一个 li，你会注意到 CSS是常数：P

I don't believe this will work in < IE8, but you could always provide a float or display: inline-block fallback to those browsers using a conditional stylesheet.

Example

CSS

ul {
    display: table; 
    width: 100%;
}

ul li {
    display: table-cell;
}

ul li a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center; 
}

jsFiddle.

jsFiddle with one more li, you'll notice the CSS is constant :P

回复收藏 0 原文

~没有更多了~