在表格字段上方添加文字（哪张图片）

Question

我有一个HTML表单，我想在开始日期和结束日期字段上添加一个文本。表单基于HTML列表和输入，我需要保持原样。

Form Image Example

 <div ng-show="c.createCouponDiv">
            <form  ng-submit="c.createCouponForm()" class="form-style-9">
                <h2>Create Coupon</h2>
                <ul>
                    <li>
                        <input type="text" ng-model="c.couponFields.title" class="field-style field-full align-none" placeholder="Title" required/>
                    </li>
                    <li>
                        <input type="date" ng-model="c.couponFields.startDate" class="field-style field-split align-left" id="startDate" placeholder="Start Date" />
                        <input type="date" ng-model="c.couponFields.endDate" class="field-style field-split align-right" id="endDate" placeholder="End Date" />
                    </li>
                    <li>
                        <input type="text" ng-model="c.couponFields.amount" class="field-style field-split align-left" placeholder="Amount" />

                        <input list="couponBrowsers" name="couponBrowsers" ng-model="c.couponFields.type" class="field-style field-split align-right" placeholder="Type" />
                        <datalist id="couponBrowsers">
                            <option value="RESTAURANTS">
                            <option value="ELECTRICITY">
                            <option value="FOOD">
                            <option value="HEALTH">
                            <option value="SPORTS">
                            <option value="CAMPING">
                            <option value="TRAVELING">
                        </datalist> 
                    </li>
                    <li>
                        <input type="text" ng-model="c.couponFields.message" class="field-style field-split align-left" placeholder="Message" />
                        <input type="text" ng-model="c.couponFields.price" class="field-style field-split align-right" placeholder="Price" />
                    </li>
                    <li>
                        <input type="text" ng-model="c.couponFields.image" class="field-style field-full align-none" placeholder="Image URL" />
                    </li>
                    <li class="submit">
                        <input type="submit" value="Submit" class="field-style field-split align-left"/>
                        <input type="button" value="Reset Fields" ng-click="c.createCouponResetButton()" class="field-style field-split align-right"/>
                    </li>
                </ul>
            </form> 

Answer 1

试试这个：

input[type=date]{
  width: 200px;
}

span {
  width: 210px;
  float: left;
  text-align: center;
}

 <div ng-show="c.createCouponDiv">
            <form  ng-submit="c.createCouponForm()" class="form-style-9">
                <h2>Create Coupon</h2>
                <ul>
                    <li>
                        <input type="text" ng-model="c.couponFields.title" class="field-style field-full align-none" placeholder="Title" required/>
                    </li>
                    <li> 
                      <span>start date</span>
                      <span>end date</span>
                  </li>
                  
                    <li>
                        <input type="date" ng-model="c.couponFields.startDate" class="field-style field-split align-left" id="startDate" placeholder="Start Date" />
                        <input type="date" ng-model="c.couponFields.endDate" class="field-style field-split align-right" id="endDate" placeholder="End Date" />
                    </li>
                    <li>
                        <input type="text" ng-model="c.couponFields.amount" class="field-style field-split align-left" placeholder="Amount" />

                        <input list="couponBrowsers" name="couponBrowsers" ng-model="c.couponFields.type" class="field-style field-split align-right" placeholder="Type" />
                        <datalist id="couponBrowsers">
                            <option value="RESTAURANTS">
                            <option value="ELECTRICITY">
                            <option value="FOOD">
                            <option value="HEALTH">
                            <option value="SPORTS">
                            <option value="CAMPING">
                            <option value="TRAVELING">
                        </datalist> 
                    </li>
                    <li>
                        <input type="text" ng-model="c.couponFields.message" class="field-style field-split align-left" placeholder="Message" />
                        <input type="text" ng-model="c.couponFields.price" class="field-style field-split align-right" placeholder="Price" />
                    </li>
                    <li>
                        <input type="text" ng-model="c.couponFields.image" class="field-style field-full align-none" placeholder="Image URL" />
                    </li>
                    <li class="submit">
                        <input type="submit" value="Submit" class="field-style field-split align-left"/>
                        <input type="button" value="Reset Fields" ng-click="c.createCouponResetButton()" class="field-style field-split align-right"/>
                    </li>
                </ul>
            </form>