Question

在我的页面上，我有一个无序列表，其中包含一些列表项，用作将内容加载到div中的链接。

艺术指导要求列表项目左右完全对齐。我编写了一些JavaScript来确定ul的宽度，并计算各个li元素的宽度，划分剩余空间并分别向左和向右推送元素。它很棒。

现在我们想在第一个下面添加另一个ul和另一组链接。

如何重新调整代码以完成与以前相同的工作？

所有列表项的样式都为display:inline;，如果一个浏览器上的字体比另一个浏览器上的字体大一些，则它们的宽度必须是流畅的。

这是我的HTML :(它们一起运行以克服内联列表元素的间距问题）

<div id="portfolio">
    <ul class="stacked-nav-top">
        <li class="project_link">
            <a href="#" class="project_class planning" id="commercial-industrial" title="Commercial Industrial Projects">
                Commercial &amp; Industrial
            </a>
        </li>
        <li class="breaker">//</li>
        <li class="project_link">
            <a href="#" class="project_class planning" id="government-institutional" title="Government Institutional Projects">
                Government &amp; Institutional
            </a>
        </li>
        <li class="breaker">//</li>
        <li class="project_link">
            <a href="#" class="project_class planning" id="affordable-housing" title="Affordable Housing Projects">
                Affordable Housing
            </a>
        </li>
        <li class="breaker">//</li>
        <li class="project_link">
            <a href="#" class="project_class planning" id="multi-family-housing" title="Multi-family Housing Projects">
                Multi-family Housing
            </a>
        </li>
    </ul>
</div>

我的JavaScript：

$(function()
{
    var linkwidth = 0;
    $('#portfolio ul li.project_link').each(function() 
    {
        linkwidth += $(this).outerWidth()
    });

    var leftover = ($('#portfolio ul').outerWidth() - linkwidth);
    var breakerwidth = Math.floor((leftover / 3));
    $('#portfolio ul li.breaker').css('width', breakerwidth);
});

修改

我的CSS：

section#portfolio ul {
    display:block;
    width:820px;
    text-align:center;
}
.stacked-nav-top {
    border-top:solid 1px rgba(97,58,17,.3);
    margin:0px;
    background:transparent url(images/dotted_line_820.png) center 19px no-repeat;
    padding:10px 0px;   
}
.stacked-nav-bottom {
    border-bottom:solid 1px rgba(97,58,17,.3);
    padding-bottom:10px;
    margin:10px 0px 15px 0px;
}
section#portfolio ul li {
    display:inline;
    font:lighter .65em "Tahoma", "Geneva", sans-serif;
    color:rgb(145,145,145);
    text-transform:uppercase;
}
section#portfolio ul li.breaker {
    display:inline-block;
    text-align:center;
}

我已经尝试将所有JavaScript包装在$('#portfolio ul').each(...中，但这似乎不起作用。它根据第一个ul设置间距，而不是单独设置。

Answer 1

我真的不太明白你想要什么，但是，如果你想在你的每个ul上重复这个操作，你必须循环每个ul，然后进行计算。

在这里演示，尊重HTML内联语法（内联块问题）。

http://jsfiddle.net/ggX2r/2/

// Inside a document.ready scope of couse...
$('#portfolio ul').each(function () {
    var linkwidth = 0,
        leftover,
        breakerwidth;

    // *this* refers to your current <ul> child of your #portfolio.
    $('li.project_link', this).each(function() {
        // *this* refers now to your current <li.project_link> element
        linkwidth += $(this).outerWidth();
    });
    leftover = ($('#portfolio ul').outerWidth() - linkwidth);
    breakerwidth = Math.floor((leftover / 3));

    $('li.breaker', this).css('width', breakerwidth);   
});

为一个类似的DOM元素重新利用一些Javascript

1 个答案: