0

我的布局中有一个自定义下拉列表，它的宽度取决于列表项的长度（我认为是设计使然）。我想将此下拉列表拉伸到整个网格宽度（宽度：100%），但类中的样式或内联样式不起作用。在我渲染的源代码中，我看到由任何基础脚本计算的注入内联样式宽度，我不知道如何覆盖它。有什么解决办法吗？

<div class="row">
<div class="twelve columns">
    <div class="row">
        <div class="eight columns " style="background-color:red">
                some content
        </div>
        <div class="four columns " style="background-color:blue">
            <form class="custom">       
                <select style="display: none;">
                    <option value="1">opt a</option>
                    <option selected="selected" value="2">opt b</option>
                    <option value="3">opt c</option>
                    <option value="4">opt d</option>
                </select>
                <div class="custom dropdown">
                    <a class="current " href="#" >
                        opt b
                    </a>
                    <a class="selector" href="#"></a>
                    <ul>
                        <li>opt a</li>
                        <li class="selected">opt b</li>
                        <li>opt c</li>
                        <li>opt d</li>
                    </ul>
               </div>
            </form>
        </div> 
    </div>
</div>

4

3 回答 3

0

3 次快速观察...您缺少</div> 第一个<div class="row">声明，另一个观察是您在 div 中设置了 4 列的下拉列表，因此您是否尝试将下拉列表设置为 4 列的 100% 宽度，或者整个应用程序的 100% 宽度？另外，你用的是什么版本的粉底？第三个观察结果，您使用的是基础 3 及以下的语法。4 & 5 的新语法是<div class="row"><div class="large-12 columns"></div></div>……注意“large-12”。所以我的答案是，添加缺少的结束 div，并使用适当的网格语法。如果这对您没有帮助，请在 jsfiddle 中设置一些内容，以便我们知道您使用的是什么版本的基础和 jquery，并可以查看实际问题。希望这有帮助。

于 2014-02-05T01:39:53.383 回答
0

尝试这样的事情

form.custom div.custom.dropdown {
    width:100% !important;
}
form.custom div.custom.dropdown ul {
    width:100% !important;
}
于 2013-02-24T16:37:23.090 回答
0

如果您使用 .scss 基础文件，您可以添加到您的 app.scss：

//foundation 4 syntax
form.custom {
  .dropdown {
    @include grid-column($columns:12,$float:left);
  }

或者您可以找出用于 .twelve 的 css 并添加到您的组合框中

于 2013-04-19T08:07:04.737 回答