css - 我有一个缩放栏和一个图例。我想将元素彼此右对齐以及页面移动时

Question

我希望缩放条的右侧与图例的右侧对齐。我试过 text-align: right 但它没有用。

.esri-ui-top-left.esri-ui-corner{
  text-align: right;
  left:97%;
 }

 .esri-ui-bottom-left.esri-ui-corner{
  text-align: right;
  left:97%;
 }

我是这样的

我怎样才能让它看起来像这样

Answer 1

不覆盖 CSS 类，而是使用 API 提供的 JavaScript 方法来定位默认组件、小部件或自定义 HTML 元素:

// Reposition widget
view.ui.move("zoom", "top-right");

// Add component (can be a Widget or HTMLElement)
var component = new BasemapGallery({
  view: view
});
view.ui.add(component, {position: "top-right"});

有关运行示例，请参阅以下 CodePen:https://codepen.io/arnofiva/pen/ff5f29c0037ac5ee98d79685a126ee84

有关详细信息，请查看以下资源:

• DefaultUI
• Create Custom Widget