javascript - 在中央 Pane 中对齐按钮和下拉按钮

Question

这可能是一个简单的问题，但我刚开始使用 Dojo/Javascript，我不知道自己做错了什么。

我开始以编程方式创建我的 Dojo 应用程序，我想知道的是如何在中心 Pane 中正确对齐小部件(在我的例子中，它们是切换按钮和下拉按钮)彼此相邻并且它们之间的间距正确(中央 Pane 包含一张 map ，我希望这些按钮安静地躺在上面，而不用另一个面板覆盖/限制其空间)。我想让“图例/图层”切换按钮旁边的“ map ”下拉按钮与其对齐并正确间隔。

当我指定创建它们的区域(在我的例子中是 map 使用 id="mapDiv"的区域)时，它们会吝啬地重叠一个在另一个之上，但这就是我希望它们成为的区域..只是一个彼此相邻。

我知道这听起来可能是一个 GIS/Mapping 问题，但我认为它更直接地与 Dojo/Javascript(CSS/HTML？)相关，这就是我在这里提问的原因。

我设置了这个 fiddle 代码向您展示我的意思

预先感谢您的帮助，

米

Answer 1

好吧，用 inspector 检查你的代码，你会看到你所有的元素都有内联样式，其中许多有“绝对”位置。你的问题在这里:

 <span class="dijit dijitReset dijitInline dijitBorderContainer-child diji…ijitBorderContainerPane dijitAlignMapDiv dijitDropDownButton" widgetid="downButtonMaps" style="left: 5px; top: 56px; position: absolute;">

    <span class="dijitReset dijitInline dijitButtonNode" role="presentation" data-dojo-attach-event="ondijitclick:__onClick"></span>
    <input class="dijitOffScreen" type="button" data-dojo-attach-point="valueNode" aria-hidden="true" role="presentation" tabindex="-1" data-dojo-attach-event="onclick:_onClick" value=""></input>

</span>

所以只需在您的 CSS 样式表中添加这一行

.dijitReset {
    position: relative !important;
}

它应该可以工作