在不使用大量javascript的情况下很好地分解成一个额外的div？

我有以下HTML标记：

<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
    <div id="Level1Controls">
        <div class="separated">
            <div id="PlanViewZoomSlider"></div>
        </div>
        <div class="separator">|</div>
        <div class="separated">
            <label>
                Rack Info: 
                <select id="RackInfoSelect">
                    <option value="Name">Name</option>
                </select>
            </label>
        </div>
        <div class="separator">|</div>
        <div class="separated marginedTop">
            <label>
                Enable Auto-Refresh:
                <input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
            </label>
        </div>        
    </div>
    <div id="Level2Controls">
        <div class="separated">
            <label>
                Levels To Display:
                <select id="LevelSelect">
                    <option value="All">All</option>
                </select>
            </label>
        </div>
        <div class="separator">|</div>
        <div class="separated marginedTop">
            <a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
                <span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
                <label id="ExportLabel">Export</label>
            </a>
        </div>
    </div>
</div>

我对这个解决方案很不满意，因为在宽屏显示器上，第二级控件看起来很不自然——有足够的空间将它们放在一个级别上

我目前想到的解决方案包括：

• 测量我想占用的空间的可用宽度
• 测量我拥有的每个控件的宽度
• 在第一行上放置尽可能多的控件
• 如果空间不足，请附加第二个级别

显然，将每行折叠为1项是没有意义的——我将为我的第一级控件指定一个最小宽度

这样做正确吗？或者有没有一种简单的方法可以用CSS/HTML来表达

作为一个视觉助手，我在下面附上了我的页面在横向监视器和纵向监视器上的外观

---

嗯，我会使用纯CSS：

<div id="controls">
 <div> "Separated" </div>
 <div> another control </div>
 <div> and one with an icon </div>
 ...
</div>

---

这应该会提供一个可扩展的工具栏，并且不需要不同级别的div。

您忘记了css代码。对不起，我在相关css中编辑过。我不确定是否有任何建议会“更一般”，不会利用我的CSS。好的，没有完整的应用程序代码，这也是无用的。但我想我有个问题

<div id="controls">
 <div> "Separated" </div>
 <div> another control </div>
 <div> and one with an icon </div>
 ...
</div>