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

问题描述

当使用ColdFusion 9和cfform以HTML格式工作时，我将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的autosuggest。

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.

推荐答案

我讨厌说，这样的怪怪是为什么许多人建议ditching内置的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文档，这表明可以在这里应用日期字段：

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屋！