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

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

这是一个丑陋的解决方案。基本上你可以在 div 中说唱它们并相应地设置对齐方式和边距。

<style>
.small {
  width: 10px;
  height: 10px;
  background-color: blue;
  float: right;
 }

.large {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 50px;
 }

 .container {
   float: right;
   margin-right: 50px;
 }
</style>


<div class="container">
  <div class="small"></div>
  <div class="large"></div>
</div>

https://jsfiddle.net/f2wxc1dv/

Answer 2

不要覆盖 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

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

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

I have a zoom bar and a legend. I want to right align the items to each other as well as when the page moves

css

arcgis-js-api