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

标签 javascript html css dojo arcgis-js-api

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

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

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

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

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

预先感谢您的帮助,

最佳答案

好吧,用 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;
}

它应该可以工作

关于javascript - 在中央 Pane 中对齐按钮和下拉按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27879706/

相关文章:

javascript - 在 while 循环内调用 .then() 时出现 Lint 错误

javascript - 单击使用 jQuery 选择文本

html - 'after' 的样式在浏览器中有所不同

javascript - 如何使用 Vue.js 在选择选项上使用转换

php - 使用 CSS 样式化链接

css - 如何水平居中导航菜单?

javascript - protractor.findElement() 是否意味着滚动到该元素?

javascript - 调用对象内的函数

javascript - 多个滑动div的时间和速度

html - 在 html 修复中覆盖