gpt4 book ai didi

javascript - 如何居中 Dijit Select 小部件?

转载 作者:太空宇宙 更新时间:2023-11-04 12:32:43 24 4
gpt4 key购买 nike

我使用的是 Dojo 1.10,我需要显示一个选择小部件在页面上水平居中。我不知道该怎么做。我已经猜到了一些 CSS 属性,但没有成功。选择小部件始终显示在左侧。似乎没有什么可以将它移到中心。我该怎么做?

更广泛地说,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>

最佳答案

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

给元素一个宽度并将其显示为带有自动水平边距的 block 就可以了。像这样:

<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

关于javascript - 如何居中 Dijit Select 小部件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27535511/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com