Question

我正在使用ZURB基础，我想知道在小型设备上调整菜单项是否更简单。

目前我的HTML看起来像这样：

<ul class="vertical menu align-right">
    <li><a title="My God, It's Full of Stars">Link 1</a></li>
    <li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

正如您所看到的，在所有设备上，我的菜单都对齐了“正确”。但是在较小的设备上，我想把这些项目集中在一起，我知道ZURB 6有许多类和数据方法，可以根据视点大小不同地工作。

我尝试过使用它们：

<ul class="vertical menu align-right" data-responsive-menu="small-align-center">
<ul class="vertical menu align-right small-align-center">

哪两个都不起作用！可悲的。

我想我可以使用：

/* Small only */
@media screen and (max-width: 39.9375em) {

    .menu.align-right {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .menu.align-right.vertical li {
        text-align: center;
    }

}

我更希望尽可能减少CSS，并想知道一个方法是否存在而不添加到CSS。与ZURB 6网站上的文档一样，并非列出所有文档。

问题：

是否有在小型，媒体和大型设备上使用CLASS或DATA对齐菜单项的方法？

Answer 1

在没有断点规则的情况下完成此操作的唯一方法是放弃flex规则并使用更简单的文本对齐规则，这些规则允许一些基于断点的名称组件：

<ul class="vertical menu small-12 text-center medium-text-right">
  <li><a title="My God, It's Full of Stars">Link 1</a></li>
  <li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
  <li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

这没有充分的文档说明，但是由于Foundation是从移动优先的哲学出发的，因此.text-center适用于小型视口。然后，特定于断点的类.medium-text-right会接管中等的视口，并且还会继承更大的视口。

如果flex实用程序类在其他方面很重要，那么您别无选择，只能编写媒体查询，或者，如果使用SASS，则使用断点包含。

这里是a working Codepen demo，以显示实际效果。

Answer 2

您尝试使用类align-center吗？

<ul class="vertical menu align-center">
    <li><a title="My God, It's Full of Stars">Link 1</a></li>
    <li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

https://codepen.io/fontophilic-the-vuer/pen/VNamjy

Answer 3

您只需要在small-only-text-center中添加li，只会在小型设备上影响您的li。试试这个，希望对您有所帮助。谢谢

Zurb Foundation还为所有实用程序提供了适当的文档-https://foundation.zurb.com/sites/docs/v/5.5.3/utility-classes.html

基础5：

<ul class="vertical menu align-right">
    <li class="small-only-text-center"><a title="My God, It's Full of Stars">Link 1</a></li>
    <li class="small-only-text-center"><a title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li class="small-only-text-center"><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

我认为Foundation 6还不是很成熟。 medium-text-right的作用与大屏幕相反。下面的代码段将按要求工作。试试这个，希望对您有所帮助。谢谢

基金会6：

<ul class="vertical menu">
    <li class="medium-text-right text-center"><a title="My God, It's Full of Stars">Link 1</a></li>
    <li class="medium-text-right text-center"><a title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li class="medium-text-right text-center"><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

我还使用基础6创建了基本提琴。Fiddle Example

Fiddle示例中使用的Foundation最新版本（6.5.3）CDN链接 https://foundation.zurb.com/sites/docs/installation.html#cdn-links

Answer 4

我通过使用<a>标签本身直接对齐文本，在正确使用flex box类的同时，使它起作用。由于<a>标签跨越了菜单宽度的100％，因此您可以直接在<a>标签上控制其中的文本的对齐方式。

您必须给他们默认的对齐方式text-center，以便它以所有屏幕尺寸为中心，直到达到指定的medium-text-right，然后对所有中等及以上尺寸都右对齐。

<ul class="vertical menu medium-align-right">
    <li><a class="text-center medium-text-right" title="My God, It's Full of Stars">Link 1</a></li>
    <li><a class="text-center medium-text-right" title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li><a class="text-center medium-text-right" title="Klaatu barada nikto">Link 3</a></li>
</ul>

请告诉我这个答案是否更接近实现您的期望！

Answer 5

嗯，这里需要那个解决方案，Foundation 实际上是 6.6.3

这不是 OP 正在寻找的答案，但由于我使用的是 SCSS，所以如果有人在 SCSS 中寻找解决方案，我将其留在这里以提供帮助。

.align-right{
  justify-content: center;
  @include breakpoint(medium){
    justify-content: right;
  }
}

您可能可以通过使用更长代码的纯 CSS 和 midia 查询来实现这一点。

Zurb Foundation 6菜单对齐 - 简单方便在小型设备上进行对齐

5 个答案: