1

我是 Foundation 和 jQuery SelectBox 的新手。也就是说，我已经浪费了一整夜试图完成一项简单的任务，但几乎没有任何结果。

我有这个 HTML：

<!--  Top Nav -->
<div class="nav row">
    <div class="small-3 columns">
        <select id="team" name="team">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
    </div>
    <div class="gear small-1 columns">
        <a href="#"><img id="teamSettingsGear" src="/images/settings.png" alt="Team Settings" /></a>
    </div>
    <div class="small-3 columns">
        <select id="site" name="site">
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="yellow">Yellow</option>
        </select>   
    </div>
    <div class="gear small-1 columns">  
        <a href="#"><img id="siteSettingsGear" src="/images/settings.png" alt="Site Settings" /></a>
    </div>
    <div class="small-3 columns">
        <select id="info" name="info">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>   
    </div>
    <div class="gear small-1 columns">
        <a href="#"><img id="informationGear" src="/images/settings.png" alt="Information" /></a>   
    </div>
</div>

它同时使用 Foundation 4 和 Ivanov 的名为 SelectBox 的 jQuery 插件。

这是我的服务员CSS：

.header, .help, .content, .footer {
padding-top: 10px;
} 

.content {
height: 500px;
}

.inventory, .multipurpose, .cart {
text-align: center;
}

.nav {
position: relative;
top: -15px;
}

.gear {
padding-left: 0px !important;
margin-left: 0px !important;
}

我想做的就是让齿轮浮动到选择框的右侧，中间可能有 10px。

如果我将选择框和齿轮图像放在同一个 div 中，则齿轮图像会放在下一个“行”下。

如果我弄乱了位置：相对；左：-无论如何，齿轮确实靠近选择框，但因为它是一个响应式 css 工具包，我所要做的就是扩大浏览器以再次将它们隔开。相反，如果我缩小浏览器窗口，齿轮会浮在选择框上。

4

2 回答 2

2

您无需添加其他样式即可使用 Foundation 将图像与下拉列表对齐。请记住，如果您在每一列中将两个元素放在一行中，它将浮动到彼此的右侧。尝试删除所有用于定位的样式，然后将那些样式保留在您希望有额外填充或边距的地方。这个小提琴向您展示了如何完成它。

对于移动视图，请记住很多移动设备都很小，您可以让用户使用 240x400 的设备。为了迎合那些小型设备，您必须拆分列，这样它们才能真正响应，而不是将它们全部放在一行中。下面的示例也在小提琴中显示了如何完成它。现在，您当然可以更改8和4组合以满足您的需要。但基本上这就是如何在小型设备上正确呈现元素的想法。

<div class="nav row">
    <div class="small-8 large-3 columns">
        <select id="team" name="team">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
    </div>
    <div class="gear small-4 large-1 columns">
        <a href="#"><img id="teamSettingsGear" src="img/gear.png" alt="Team Settings" /></a>
    </div>
    <div class="small-8 large-3  columns">
        <select id="site" name="site">
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="yellow">Yellow</option>
        </select>   
    </div>
    <div class="gear small-4 large-1 columns">  
        <a href="#"><img id="siteSettingsGear" src="img/gear.png" alt="Site Settings" /></a>
    </div>
    <div class="small-8 large-3 columns">
        <select id="info" name="info">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>   
    </div>
    <div class="gear small-4 large-1 columns">
        <a href="#"><img id="informationGear" src="img/gear.png" alt="Information" /></a>   
    </div>
</div>
于 2013-04-05T03:15:27.527 回答
1 
.columns { float:left; }

.clear { clear:both; height:0; }

这是一个适合你的小提琴：

http://jsfiddle.net/iGanja/L8vdh/

于 2013-04-05T02:56:41.857 回答