Question

这根本不应该是困难的...我想要的只是将日期字段框对齐在我的文本的右侧（购买日期）。由于某种原因，它只会在文本下方对齐，或者我可以将文本对齐到日期字段框的右侧。如果我使用cfform format =“flash”并在cfformgroup type =“horizontal”中对齐它将起作用。有没有人知道为什么它不能以常规形式工作..或者知道如何使它工作。非常感谢任何帮助。

Date of Purchase:
<cfinput
 type="datefield"
 name="from_date"
 width="130"
 value="#dateformat(now(),"mm/dd/yyyy")#" 
>

Answer 1

生成的代码

当ColdFusion运行时，它会生成

<form name="CFForm_1" id="CFForm_1" action="?" method="post" onsubmit="return _CF_checkCFForm_1(this)">
Date of Purchase: <div  style="position:relative;float:left;">
<div  style="float:left;">
    <input name="from_date" id="from_date"  type="datefield" value="09/12/2014" class="datefieldinput"  width="130"  />
 </div><div  id="from_dateCFForm_1_cf_buttondiv" style="float:left;padding:3px;">

    <img id="from_dateCFForm_1_cf_button" src="/CFIDE/scripts/ajax/resources/cf/images/DateChooser.png" alt='Date Picker' />

 </div><div  id="from_dateCFForm_1_cf_container" style="display:none; position:absolute; font-size:12px;overflow:visible;float:left;z-index:9050;top:1.5em;">

 </div>

备选方案1

使用表格

<cfform action="?">
<table>
<tr>
   <td>
    Date of Purchase:
   </td>

   <td>
     <cfinput
       type="datefield"
       name="from_date"
       width="130"
       value="#dateformat(now(),"mm/dd/yyyy")#" 
       >
   </td>
 </tr>
 <table>
 </cfform>

备选方案2

使用jQuery UI

https://stackoverflow.com/questions/tagged/jquery-ui-datepicker

备选方案3

使用Bootstrap。它有很多日期选择器

文本不会与日期字段框左对齐

1 个答案: