Question

我正在使用Dojo 1.10，我需要在页面上水平居中显示选择小部件。我无法弄清楚该怎么做。我已经猜到了一些CSS属性，没有运气。 Select小部件始终显示在左侧。似乎什么都没有移动到中心。我该怎么做？

更广泛地说，在Dojo文档中它描述了如何执行此操作？当我说我在网络搜索后完成网络搜索时，请相信我;也许我不知道该搜索什么。提前谢谢。

此代码改编自dijit/form/Select个样本之一。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/resources/dojo.css">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css">
    <script>dojoConfig = {async: true, parseOnLoad: true}</script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
    <script>
      require(["dojo/parser", "dijit/form/Select"]);
    </script>
  </head>

  <body class="claro">
    <select name="select1" data-dojo-type="dijit/form/Select">
      <option value="TN">Tennessee</option>
      <option value="VA" selected="selected">Virginia</option>
      <option value="WA">Washington</option>
      <option value="FL">Florida</option>
      <option value="CA">California</option>
    </select>
  </body>
</html>

Answer 1

可以这样做，但据我所知，无法通过在元素类或ID上使用CSS来完成。然而，内联样式将起作用。这是由于Dijit的呈现方式。对于水平居中，您需要指定元素宽度（固定或百分比）。请注意，此宽度只能内联定义。否则它将无法工作，并会搞砸你的渲染。

赋予元素宽度并将其显示为具有自动水平边距的块将完成。像这样：

<select data-dojo-type="dijit/form/Select" style="width: 200px; display: block; margin: 0 auto;">
    <!-- options -->
</select>

因为它是内联的，所以它不是很易于维护。所以我建议/建议使用包装元素并将dijit的宽度设置为100％，如下所示：

<div id="wrapper">
    <select data-dojo-type="dijit/form/Select" style="width: 100%;">
        <!-- options -->
    </select>
</div>

现在您可以使用CSS来控制包装器的宽度和边距：

#wrapper {
    width: 200px;
    margin: 0px auto;
}

这是关于Plunker的一个工作示例：http://plnkr.co/edit/NyD28E?p=preview

如何使Dijit Select小部件居中？

1 个答案: