1

我正在尝试在我的网站中使用 Zurb Foundation 4。我正在使用基础的“自定义表单”功能，该功能将特殊样式应用于此链接中描述的表单元素。

http://foundation.zurb.com/docs/components/custom-forms.html

我遇到的问题是 HTML 选择元素在嵌入按钮栏时不起作用。例如，以下代码有效

<form class="custom">
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
 </form>

但是嵌入在按钮组中的相同代码不起作用

<div class="button-bar">
<ul class="button-group">
            <li>
                <form class="custom">
                    <select>
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                </form>
            </li>
</ul>
</div>

我创建了一个演示问题的 JSfiddle

http://jsfiddle.net/5JbZB/4/

关于可能导致这种情况的任何想法？我最初的想法是，选择的下拉菜单被一些覆盖深度的外部 CSS 类隐藏，但我没有运气识别出有问题的元素。

4

5 回答 5

1

在 CSS 框中包含这个 css。这应该可以完成工作。

/* We use these to controls height and width styles. */
$f-dropdown-max-width: 200px;
$f-dropdown-height: auto;
$f-dropdown-max-height: none;
$f-dropdown-margin-top: 2px;

/* We use this to control the background color */
$f-dropdown-bg: #fff;

/* We use this to set the border styles for dropdowns. */
$f-dropdown-border-style: solid;
$f-dropdown-border-width: 1px;
$f-dropdown-border-color: darken(#fff, 20%);

/* We use these to style the triangle pip. */
$f-dropdown-triangle-size: 6px;
$f-dropdown-triangle-color: #fff;
$f-dropdown-triangle-side-offset: 10px;

/* We use these to control styles for the list elements. */
$f-dropdown-list-style: none;
$f-dropdown-font-color: #555;
$f-dropdown-font-size: emCalc(14px);
$f-dropdown-list-padding: emCalc(5px) emCalc(10px);
$f-dropdown-line-height: emCalc(18px);
$f-dropdown-list-hover-bg: #eeeeee;
$dropdown-mobile-default-float: 0;

/* We use this to control the styles for when the dropdown has custom content. */
$f-dropdown-content-padding: emCalc(20px);

但请记住，您的类名名称应与 css 标签相同。所以首先你必须把它们等同起来

如果您有兴趣通过 JavaScript 制作它，请查看此链接，请单击此处

于 2013-06-21T14:02:31.450 回答
0

只需像这样尝试（http://jsfiddle.net/5JbZB/1/）：

<div class="row">
    Button bar with Zurb Foundation's custom select
    <div class="button-bar">
        <form class="custom">
            <select>
                <option>Option 1</option>
                <option>Option 2</option>
            </select>
        </form>
        <ul class="button-group">
            <li><a href="#">button</a></li>
        </ul>
    </div>
</div>
于 2013-06-17T21:18:16.003 回答
0

可能您应该看到这两个链接::

添加按钮或面板内的下拉列表

通过JavaScript

于 2013-06-21T14:10:38.543 回答
0

发生的情况是按钮组 UL 和 LI 比您预期的要小。自定义表单选择元素具有 100% 的宽度，但是由于按钮栏的 UL 和 LI 远小于 100% 宽度，如果我没记错的话是 50px，那么您的选择将只有那么宽。

如果你在下面添加 css，你应该很高兴。如果您打算在其他地方使用按钮组，您可以添加另一个类来做同样的事情。

.button-group {
    width:100%;
}
.button-group li {
    width:100%;
}

小提琴链接供参考

图片

于 2013-06-24T01:49:02.593 回答
0

我不敢相信我错过了这个，但这里有一个更好的解决方案。

.button-group .custom.dropdown{
  overflow:visible;
}

http://jsfiddle.net/5JbZB/7/

于 2013-06-24T23:47:15.420 回答