Question

我使用Zurb Foundation样式和Sass mixins创建了一个按钮。我使用@include dropdown-button($base-style:false);来摆脱默认的箭头样式。现在我想在其位置（右侧）插入我自己的箭头

这是默认按钮：

default

现在是我的按钮：

current

我希望我看起来像这样：

final

这是我的HTML：

<a class="login width-limit" href="#" data-dropdown="drop">Client_Test_1 </a><br>
      <ul id="drop" data-dropdown-content class="f-dropdown">
        <li><a href="#">Logout</a></li>
        <li><a href="#">Account Settings</a></li>
        <li><a href="#">Change SMTP Settings</a></li>
      </ul>

这是我的scss：

.login {
  @include grid-column(2);
  @include button();
  @include dropdown-button($base-style:false);
  font-family: $font-stack;
  font-size: .9em;
  color: #fff;
  background-color: $secondary-color;
  height: 27px;
  border-radius: 7px;
  margin: 6px 0 5px 0;
  padding: 5px 4px 5px 4px;
}
.width-limit {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  display: inline-block;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2em; //shrink text 
}
.login:hover {
  background-color: $primary-color;
}

这是一个小提琴：http://jsfiddle.net/Yq5uU/

如何添加自己的自定义箭头使其看起来像第三个示例？提前谢谢。

Answer 1

你无法让它无限长，也不会破坏页面布局。如此简单的解决方案将决定它可以获得多长时间并设置按钮容器以在开始看起来有线之前填充最大列数。然后你可以根据需要在容器内对齐你的按钮，如果它太长，你可以用“ ... ”css：overflow:hidden; text-overflow:ellipsis;替换部分名称或显示简短形式与js。

示例：http://jsfiddle.net/z8aWL/2/

Answer 2

网格列2 mixin为您提供：

width: grid-calc($columns, $total-columns);

如果您使用的是默认的12格，则输入如下所示：

width: grid-calc(2, 12);

calc函数返回2的百分比除以12

width: 16.67%;

然后用150px覆盖该宽度值。如果您对大行使用默认网格值，则应该接近167px宽。

如果要保持此响应，则应避免设置硬px值。

现在，对于长名称，您有两个基本选项。通过隐藏溢出（如JAre建议）或让疯狂的长名称破坏你的网格来截断名称，但是包含在按钮中。那你就不需要设置宽度了。所有网格col mixin都会给你一个宽度百分比。该行设置宽度的值（col为百分比）。你的按钮仍然包含在一行中，所以你应该好好去。

我认为你最好的选择，如果你有权访问你的用户名数据库，就是找到最坏的情况＆＃34;并为此设计。或者更好的是，首先将缩短的名称值返回到您的设计中。

将自定义箭头添加到Zurb-Foundation下拉按钮

2 个答案: