Jquery 如何获得<；李>；拉伸到父级中的可用空间<；ul>；在IE7中？

如何将IE7中的

的宽度拉伸到父级

中的可用空间

在IE 8和FF中

像这样掉下来没关系

但在IE7中，它是这样来的

编辑：7月5日

见IE7

如何获得与IE7中的IE8和FF相同的结果

我不想给

和

指定固定宽度

这是CSS

#topnavcontainer {
    float: left;
    overflow: visible;
    width: 80%;
    margin-left: 17px }

ul#nav {
    position: relative;
    z-index: 597;
    float: left;
    margin-top: 6px; }

    ul#nav li {
        float: left;
        line-height: 1.3em;
        vertical-align: middle;
        zoom: 1; }

        ul#nav li a:active { color: #fff }

        ul#nav li.hover,
ul#nav li:hover {
            position: relative;
            z-index: 599;
            cursor: default; }

    ul#nav ul {
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 598;
        width: 100%;
        width: auto;
        margin-top: 0px;
        white-space: nowrap;
        background -moz-opacity: .80;
        filter: alpha(opacity=80);
        opacity: .80;
        background: #fff }

    ul#nav li.last ul { left: -47px }

    ul#nav li li {
        float: none;
        font-weight: normal;
        padding: 7px 10px;
        border: solid #99b2d8;
        border-width: 0 1px 0 1px;
        background-color: #f6f6f6;
        color: #1f5fa9;
        background: #fff;
        display: block;
        width: auto;
        padding-bottom: 0; }

    ul#nav ul ul {
        top: 1px;
        left: 99%; }

    ul#nav li:hover > ul { visibility: visible;background: transparent }

ul#nav { font-weight: bold; }

    ul#nav li {
        padding: 5px 10px;
        border-style: solid;
        border-width: 0px 1px 0px 0;
        border-color: #fff;
        background-color: #f6f6f6;
        color: #fff;
        background: transparent url(images/css-bg/navaigation-off-hover-bg.jpg) repeat-x left top }

    ul#nav > li.first { background: transparent url(images/css-bg/li-first-bg.jpg) no-repeat left top }

    ul#nav li.first.current { background:url(images/css-bg/navaigation-hover-first-bg.jpg) left top;color: #ed8813 }

    ul#nav > li.first:hover { background: transparent url(images/css-bg/li-first-bg.jpg) no-repeat left -27px }

    ul#nav > li.last { background: transparent url(imagescss-bg/li-last-bg.jpg) no-repeat right top }

    ul#nav li li.last {
        border: 0 solid #99b2d8;
        border-width: 0 1px 1px 1px;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px; }

    ul#nav li.last.current { background:url(images/css-bg/navaigation-hover-last-bg.jpg) right top;color: #ed8813 }

    ul#nav > li.last:hover { background: transparent url(imagescss-bg/li-last-bg.jpg) no-repeat right -27px }

    ul#nav li a { color: #fff; }

    ul#nav ul li.last { padding-bottom: 6px; }

    ul#nav ul li a:hover { text-decoration: underline }

    ul#nav li.hover,
    ul#nav li:hover { color: #fff;background: url(imagescss-bg/navaigation-off-hover-bg.jpg) repeat-x left -27px }

    ul#nav ul li.hover,
    ul#nav ul li:hover { background: #fff }

    ul#nav li:hover a { color: #fff }

    ul#nav li:hover li a { color: #1f5fa9 }

    ul#nav ul li.hover a,
    ul#nav ul li:hover a { color: #1f5fa9 }

    ul#nav ul li.hover a, ul#nav ul li:hover a { color: #1f5fa9 }

    ul#nav > li.current { background:url(images/css-bg/navaigation-active-bg.jpg) repeat-x left top;color: #ed8813 }

    ul#nav li.current a { color: #ed8813 }

    ul#nav a:link,
    ul#nav a:visited {
        color: #fff;
        text-decoration: none; }

    ul#nav a:hover { color: #000; }

    ul#nav a:active { color: #ffa500; }

---

如果您想使用Jquery，这里有一个解决方案

(function () {
    $("ul#nav > li").each(function () {
    var width = 0;
    $("ul > li", $(this)).each(function () {
      var w = $(this).width();
      if (width < w) {
        width = w;
      }
    });
    if (width != 0) {
      $("ul > li", $(this)).width(width);
    }
  });
})();

（函数（）{
$（“ul#nav>li”）。每个（函数（）{
var宽度=0；
$（$（ul>li），$（this））。每个（函数（）{
var w=$（this.width（）；
如果（宽度li），$（this））。宽度（width）；
}
});
})();

尝试将边框应用于ul而不是li。这样，您可以为整个列表创建一个边框，而不是为每个列表创建边框。如果这不起作用，请告诉我。

你能发布一个Jsbin示例吗？@Pablo Fernandez-Jsbin示例补充说这为什么被否决了？这个问题绝对没有错。你刚刚帮我省去了写同样东西的时间。如果允许使用JS解决方案，我会这样做。所以没有CSS唯一的方法可以做到这一点？我尝试先使用CSS，但找不到解决方案，所以我改为使用jquery。@Dustin Fineout，@Codler-这是IE7错误吗？是的，这是IE7中的布局错误。