为何Dojo DateTextBox组件各元素分行显示？技术求助

嘿，这个问题我之前踩过坑！从你说的「Date Event Starts」标签、下拉箭头、清除按钮和输入框各自占一行的症状来看，核心问题出在Dojo的Claro主题样式没在屏幕视图下生效，先看看你贴的页面头部代码：

<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/dojo/dijit/themes/claro/claro.css" media="print" />

这里的media="print"是罪魁祸首！这个属性会让浏览器只在打印页面时加载这个样式表，屏幕渲染时完全忽略它——没有了Claro的布局样式，DateTextBox的各个元素自然就会回到默认的块级元素布局，导致换行错乱。

一步步修复： #

1. 修正样式表的media属性 #

把media="print"改成media="screen"，或者直接删掉这个属性（默认就是针对屏幕的）：

<!-- 推荐写法 -->
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/dojo/dijit/themes/claro/claro.css" />

2. 给页面根元素加上claro类 #

Dojo的主题样式依赖根元素的claro类才能正确应用，一般把它加在<body>标签上：

<body class="claro">

没有这个类的话，就算样式表加载了，很多组件样式也不会生效。

3. 确认组件初始化逻辑正确 #

你设置了parseOnLoad: false，这意味着不会自动解析页面上的Dijit组件，所以必须手动调用解析方法。记得在DOM加载完成后执行：

require(["dojo/parser", "dijit/form/DateTextBox"], function(parser) {
  // 解析页面上的所有Dijit组件
  parser.parse();
});

4. 检查资源路径是否正确 #

最后确认一下TEMPLATE_DIR指向的路径里，claro.css、dojo.js还有Dijit的模块文件都能正常加载——可以用浏览器开发者工具的Network面板看看有没有404错误，路径错了样式肯定加载不出来。

做完这几步，DateTextBox的布局应该就能恢复正常，所有元素会乖乖排在同一行里啦！

内容的提问来源于stack exchange，提问作者Rich