Question

我正在使用dojo.mobile（1.10）构建一个简单的移动应用程序，我遇到了以下问题（可能是由于我缺乏CSS知识，我很抱歉）。

为了我的问题，假设我想创建一个水平的ScrollablePane，它将包含一些动态添加到容器中并完全居中在容器中的按钮。

我想到解决水平对齐的第一件事是：

<div data-dojo-type="dojox/mobile/ScrollablePane" data-dojo-props="scrollDir: 'h'" style="text-align:center; white-space: nowrap;">
  <button data-dojo-type="dojox/mobile/Button">My Button 1</button>
  <button data-dojo-type="dojox/mobile/Button">My Button 2</button>
  <button data-dojo-type="dojox/mobile/Button">My Button 3</button>
</div>

不幸的是，前面的代码使按钮在左侧对齐。如果我删除'scrollDir'属性，那么按钮是水平对齐的，但当然，当所有按钮宽度的总和超过移动显示宽度时，它不再能够水平滚动。

最终，我想要实现的目标是：

虽然按钮的总宽度小于移动显示屏宽度，但按钮应完全位于容器内的中心位置，并且相对于彼此的距离相同;
当按钮的总宽度大于移动显示宽度时，应通过水平滚动容器来访问新按钮。

请查看previous points in picture。

我想知道我的尝试失败的原因以及我的UI问题的潜在解决方案。

提前致谢。

Answer 1

我在CSS中添加了样式，但您可以看到如何将它们添加到您的案例中的data-dojo-props属性中。基本上，您需要一个水平溢出的包装器，其中包含不包裹的按钮块。

/* Ignore this Stuff: */
html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* Important Stuff: */
.wrapper {
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.inner {
  white-space: nowrap;
}

<div class='wrapper'>
  <div data-dojo-type="dojox/mobile/ScrollablePane" data-dojo-props="scrollDir: 'h'" style="/*text-align:center; white-space: nowrap;*/" class="inner">
    <button data-dojo-type="dojox/mobile/Button">My Button 1</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 2</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 3</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 4</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 5</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 6</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 7</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 8</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 9</button>
  </div>
</div>

text-align：center不使用水平dojox / mobile / ScrollablePane

1 个答案: