cfinput 中的标签显示在文本框的右侧 [英] Label in cfinput is displaying to the right of the text box

问题描述

在使用 Coldfusion 9 和 HTML 格式的 cfform 时，我将 cfinput 放在带有标签的页面上，它会在文本框的右侧显示标签.我尝试过使用标签，无论有没有它，但无论我做什么，标签总是在盒子的右边.

When working with Coldfusion 9 and cfform with a HTML format, I place a cfinput on a page with a label, it displays the label to the right of the text box. I have tried using the tag, with and without it but no matter what I do, the label is always to the right of the box.

<cfform method="post" name="mfForm" >
  <label for="campaign">Mailfile ID:</label>
  <cfinput type="text" name="campaign" id="campaign">
  <cfinput type="submit" name="submit" value="Submit" id="submit">
</cfform>

不记得最近有过这个问题.我只会使用 HTML 表单，但想利用 cf 的自动建议.

Don't ever remember having this problem before recently. I would just use an HTML form, but want to take advantage of cf's autosuggest.

推荐答案

我不想这么说，但坦率地说，像这样的怪癖是为什么很多人建议放弃内置的 ajax 功能并使用底层库(或一些 jQuery 替代品)) 直接地.您将拥有更大的控制权、更多的选择，更不用说您不会被 ColdFusion 附带的任何版本所束缚.这些库中的大多数都经常更新，因此在一年内与 CF 捆绑在一起的库通常已经过时了.ExtJS 就是一个很好的例子.公版已经到了4.2.1版本，但是CF9还是用3.1.0.

I hate to say it, but frankly quirks like this are why many people suggest ditching the built-in ajax features and using the underlying libraries (or some jQuery alternative) directly. You will have greater control, more choices, not to mention you will not be tied to whatever version ships with ColdFusion. Most of these libraries are updated frequently, so within a year the ones bundled with CF are often out of date. ExtJS is a good example. The public version is already up to version 4.2.1, but CF9 still uses 3.1.0.

无论如何，回到你的问题......如果你做一个查看源代码，你会看到 CF 生成几个 div 标签，其中一个包含 style="float:left" 指令，它可以解释您所看到的行为.

Anyway, getting back to your question ... if you do a view source you will see CF generates several div tags, one of which contains the style="float:left" directive, which could explain the behavior you are seeing.

我快速搜索了一下，发现 CF8 文档 建议对日期字段进行 hack，这也可能适用于此处:

I did a quick search and happened upon a note in the the CF8 docs which suggest a hack for datefields which may also apply here:

• 要在 Internet Explorer 和 Firefox 中正确显示控件旁边的标签文本，您必须将标签文本括在一个<div style="float:left;"> 标签并在每个标签之间放置三个 <br> 标签行.

• To correctly display label text next to the control in both Internet Explorer and Firefox, you must surround the label text in a <div style="float:left;"> tag and put three <br> tags between each line.

对于您发布的示例，只需添加 div 似乎对我有用:

Simply adding the div seems to work for me with the sample you posted:

<cfform method="post" name="mfForm" >
    <div style="float:left;">
        <label for="campaign">Mailfile ID:</label>
    </div>
    <cfinput type="text" name="campaign" id="campaign" autosuggest="AA,BBB,CCC,DDD">
    <cfinput type="submit" name="submit" value="Submit" id="submit">
</cfform>

但同样，您可能需要考虑直接使用 javascript 库，而不是依赖内置的 ajax 功能，这样您就可以避免这样的怪异现象.

But again, you might want to consider using the javascript libraries directly instead of relying on the built-in ajax features, so you can avoid weirdness like this.

这篇关于cfinput 中的标签显示在文本框的右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！