Question

我的页面上有一些导航，艺术总监想要完全合理。我使用通常的display:inline-block作为li元素，但之后我需要在两边具有相等间距的元素之间留下一些斜杠“//”。

尝试计算项目并使其像素完美让我有点紧张，因为在某些浏览器上可能会对字体进行不同的处理并将导航分为两行。另外，我不能轻易地左对齐第一个元素，然后右对齐最后一个元素。

所以，我创建了一些类，所以我可以做一些测量并绘制出散列标记的宽度。我不是一个JavaScript家伙。

是一种更好的方法来编写Javascript以将其加强为更优雅的功能。

修改

这就是现在的样子 - 它在艺术指导文件中的样子......

http://www.ahmbrands.com/stackoverflow/ssg_subnav.png

HTML

<section id="portfolio">
<h3>Portfolio</h3>
<!-- REMOVE spaces between the <li> so there's no whitespace to deal with! -->
<ul><li class="project_link"><a href="#" class="project_class planning" id="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" title="Government Institutional Projects">Government &amp; Institutional</a></li><li class="breaker">//</li><li class="project_link"><a href="#" class="project_class planning" id="educational" title="Educational Projects">Educational</a></li><li class="breaker">//</li><li class="project_link"><a href="#" class="project_class planning" id="residential" title="Residential Projects">Residential</a></li><li class="breaker">//</li><li class="project_link"><a href="#" class="project_class planning" id="parks" title="Parks Recreation Projects">Parks &amp; Recreation</a></li></ul>
</section>

CSS：

/* Portfolio Section Styles */
section#portfolio {
    text-align:left;
    width:820px;
    margin:0 auto;
}
section#portfolio ul {
    display:block;
    width:820px;
    text-align:center;
    margin:0px 0px 15px 0px;
    padding:10px 0px;
    border-top:solid 1px rgba(97,58,17,.3);
    border-bottom:solid 1px rgba(97,58,17,.3);
}
section#portfolio ul li {
    display:inline;
    font:normal .75em/1.5em Tahoma, Geneva, sans-serif;
    color:rgb(107,144,67);
    text-transform:uppercase;
}
section#portfolio ul li.breaker {
    display:inline-block;
    text-align:center;
}

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 / 4));
  $('#portfolio ul li.breaker').css('width', breakerwidth);
});

用于计算<li>间距以证明导航元素的数学的数学</li>

0 个答案: