Question

我一直在尝试创建一个菜单，其中所有菜单项的大小和中等窗口大小都是文本长度，但是当窗口很小时，它会占用12列。我用Zurb Foundation作为标题说。

这是使用slim的代码的有趣部分。请注意给出float的正确类：对象的右css属性

a.menu-item-right.column.right.small-12.medium-1 href="#" LINKLlaksdlkasdja
a.menu-item-right.column.right.small-12.medium-1 href="#" LINKLlaksdlkasdja
a.menu-item-right.column.right.small-12.medium-1 href="#" LINKLlaksdlkasdja
a.menu-item-right.column.tight.small-12.medium-1 href="#" LINKLlaksdlkasdja

或

<a class="menu-item-right column right small-12 medium-1" href="#">LINKLlaksdlkasdja</a>
<a class="menu-item-right column right small-12 medium-1" href="#">LINKLlaksdlkasdja</a>
<a class="menu-item-right column right small-12 medium-1" href="#">LINKLlaksdlkasdja</a>
<a class="menu-item-right column right small-12 medium-1" href="#">LINKLlaksdlkasdja</a>

如果您愿意。

可悲的是（现在），当没有其他任何指定时，基金会的一个特征是使小行为永久存在。指定medium-1会使所有按钮堆叠如预期的那样奇怪。

你会如何干净利落地实现这个目标？

谢谢，

Answer 1

可能只需使用medium-centered即可 http://jsfiddle.net/3MUDv/

<div class="wrapper row">
<a class="menu-item-right column small-12 medium-centered " href="#">LINKLlaksdlkasdja</a>
<a class="menu-item-right column small-12 medium-centered " href="#">LINKLlaksdlkasdja</a>
<a class="menu-item-right column small-12 medium-centered " href="#">LINKLlaksdlkasdja</a>
<a class="menu-item-right column small-12 medium-centered " href="#">LINKLlaksdlkasdja</a>
</div>

的CSS：

.wrapper{
    text-align: right;
}

Answer 2

我终于找到了它并将它发布在这里，如果它可以帮助某人。终于很容易了。回答：

    nav class="top-bar" data-topbar="data-topbar"
      ul.title-area
        li.name
        li.toggle-topbar.menu-icon
          a href="#"
            span Menu
      section.top-bar-section
        ul.right
          li
            a href="#" Artists
          li
            a href="#" Symposiums
          li
            a href="#" Galeries
          li
            a href="#" Mon Portail

在Zurb Foundation中只设置小型属性，让中型和大型列的大小与其内容相同

2 个答案: