jquery - 不能影响CSS

Question

我是 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;
}

我想要做的就是让齿轮 float 到选择框的右侧，中间大约有 10px。

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

如果我搞乱了position:relative；左:-无论如何，那么齿轮确实会移近选择框，但因为它是一个响应式 CSS 工具包，所以我所要做的就是扩大浏览器以再次将它们分开。相反，如果我缩小浏览器窗口，齿轮就会漂浮在选择框上方。

Answer 1

您无需添加其他样式即可使用 Foundation 将图像与下拉列表对齐。请记住，如果将两个元素放在每列的一行中，它们将 float 到彼此的右侧。尝试删除所有用于定位的样式，只保留那些您想要额外填充或边距的样式。 This fiddle向您展示如何实现它。

对于移动 View ，请记住，许多移动设备都很小，您可以让用户使用 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>