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

Question

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

这是默认按钮：

现在这是我的按钮：

我希望我的看起来像这样：

这是我的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

grid column 2 mixin 给你这个：

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

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

width: grid-calc(2, 12);

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

width: 16.67%;

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

如果你想保持这种响应，你应该避免设置硬 px 值。

现在对于长名称，您有两个基本选择。通过隐藏溢出来截断名称（如 JAre 建议的那样），或者让疯狂的长名称破坏您的网格，但包含在按钮中。然后你不需要设置宽度。 grid col mixin 所做的只是给你一个宽度百分比。该行设置宽度的值（其中 col 是百分比）。你的按钮仍然包含在一行中，所以你应该很高兴。

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