在中央窗格中对齐按钮和下拉按钮

Question

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

我开始以编程方式创建我的 Dojo 应用程序，我只想知道如何正确对齐小部件（在我的例子中，它们是切换按钮和下拉按钮) 在中心窗格中一个并排 它们之间的间距正确 （中心窗格包含一张地图，我希望这些按钮和平地躺在上面而不 covering/limiting 它space 与另一个面板）。我想让 "Maps" 下拉按钮紧挨着 "Legend/Layers" 切换按钮并与其对齐 spaced.

当我指定区域（在我的例子中是地图带有 id="mapDiv" 的区域）创建它们时，它们会吝啬地重叠在另一个之上，但这就是我希望它们成为的区域..只有一个挨着一个。

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

我设置这个 fiddle code 来告诉你我的意思

在此先感谢您的帮助，

米

Answer 1

好吧，用检查器检查你的代码，你会看到你所有的元素都有内联样式，其中许多元素有 "absolute" 位置。您的问题在这里：

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

它应该可以工作

在中央窗格中对齐按钮和下拉按钮

Align a Button and a Dropdown Button in the Center Pane

html

javascript

css

dojo

arcgis-js-api