Question

我花了几周的时间尝试使用dojo小部件正确地调整表单的大小，位置和方式输入字段。在对Stack Overflow和其他地方进行了大量研究之后，包括dojotoolkit.org网站上的许多文档，我还没有看到一种可靠地确定每个字段的大小和位置的方法。

我想在同一行输入日期，开始时间和结束时间。为此，我想使用dijit / form / DateTextBox，dijit / form / ValidationTextBox和dijit / form / Select。

例如，我有HTML的这一部分：

<div data-dojo-type="dijit/form/Form" id="form-id" widgetid="form" lang="en">
<div>
  <span id="day-id-1" style="width: 12px; visibility: hidden;">1</span>
  <input id="date-id" type="text" data-dojo-type="dijit/form/DateTextBox" required="true" style="width: 150px;">
  <input id="start-hr-id" type="text" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="regExp:\'[0-9]{1,2}\', invalidMessage:\'Must be one or two digits.\'" value="7" style="width: 30px; text-align: right;">:
  <input id="start-min-id" type="text" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="regExp:\'[0-9]{2}\', invalidMessage:\'Must be two digits.\'" value="00" style="width: 30px; text-align: center;">
  <select id="start-mer-id" data-dojo-type="dijit/form/Select" style="width: 32px;">
    <option value="AM">AM</option>
    <option value="PM" selected="selected">PM</option>
  </select>&nbsp;&nbsp;
  <input id="end-hr-id" type="text" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="regExp:\'[0-9]{1,2}\', invalidMessage:\'Must be one or two digits.\'" value="8" style="width: 30px; text-align: right;">:
  <input id="end-min-id" type="text" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="regExp:\'[0-9]{2}\', invalidMessage:\'Must be two digits.\'" value="30" style="width: 30px; text-align: center;">
  <select id="end-mer-id" data-dojo-type="dijit/form/Select" style="width: 32px;">
    <option value="AM">AM</option>
    <option value="PM" selected="selected">PM</option>
  </select>
</div>
</div>

我想将CSS移动到.css文件中并链接到它。但是，我不能，因为这似乎不适用于这些小部件。

此外，text-align未正确显示。数字7,8,50和30在它们的框中左对齐。我希望前两个对齐，另外两个要居中。

当我在Chrome（在Windows 10上）查看此内容并在开发人员工具中查看它时，我发现text-align on的Computed format has＆＃34; right＆＃34;划掉了element.style并替换为＆＃34;开始输入，textarea，select，button＆＃34;来自用户代理样式表。将样式设置为＆＃34;！important＆＃34;在元素上没有覆盖它。

是否有可靠的方法为这些字段设置样式而不将其放入HTML（或使用JavaScript修复）？你会如何建议修复text-align？

感谢您的指导！

--- --- UPDATE

作为对MiBrock的回应，以下是CSS的指定方式：

<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/css/CookieNotice.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/css/greenmaking.css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="Test RSS-Feed" href="<?php echo WB_URL; ?>/modules/news/rss.php?page_id=12" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

我在使用WebsiteBaker的环境中工作，这是一个开源的PHP框架。对TEMPLATE_DIR的引用转到框架中的templates子目录，大多数CSS都来自该框架。 greenmaking.css有自定义CSS，googleapis用于Google提供的标准字体字符。

感谢您的回复！

如何正确调整dojo小部件的大小和位置？

0 个答案: