尝试将日历图标移动到文本框中

Question

我试图将日历图标移动到文本框中，但我无法移动它。请帮我通过这个。提前致谢。下面是我在Default.aspx文件中的代码：

<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<div class="col-lg-6 col-md-6 col-xs-6">
 <asp:Label runat="server" CssClass="control-label">Date of Event:
 </asp:Label> 
                           </div>
                            <div class="col-lg-6 col-md-6 col-xs-6">
                                <asp:Calendar ID="DateOfEventCalender" runat="server" Visible="False" OnSelectionChanged="DateOfEventCalender_SelectionChanged" CalendarLocation="Bottom"></asp:Calendar>
                                <div class="right-inner-addon">
                               <asp:LinkButton ID="Calendar2LinkButton" runat="server" CssClass="glyphicon glyphicon-calendar" CausesValidation="false" onclick="Calendar2LinkButton_Click"></asp:LinkButton>                           
                                     <asp:TextBox ID="DateOfEventText" runat="server" CssClass="form-control calendarForm" ReadOnly="true"></asp:TextBox>
                                    </div>
                            </div>
                        </div>
                      </div>

Default.aspx.cs：

protected void DateOfEventCalender_SelectionChanged(object sender, EventArgs e)
    {
        DateOfEventText.Text = DateOfEventCalender.SelectedDate.ToShortDateString();
        DateOfEventCalender.Visible = false;
    }

    protected void Calendar2LinkButton_Click(object sender, EventArgs e)
    {
        DateOfEventCalender.Visible = true;
    }

Site.css：我尝试过不同的课程并没有什么区别。

@media screen and (min-width: 768px) {
.right-inner-addon i {
    position: absolute;
    right: 100px;
    padding: 10px 12px;
}
}

@media screen and (min-width: 0px) and (max-width: 479px) {
.right-inner-addon i {
    position: absolute;
    margin-left: 150px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding: 10px 12px ;
}
}

@media screen and (min-width: 480px) and (max-width: 767px) {
.right-inner-addon i {
    position: absolute;
    margin-left: 250px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding: 10px 12px ;
}
}

Answer 1

分配包含文本框和图标位置的div：relative并指定图标位置：absolute，right：0或者还指定top：5px或任何适合您要求的内容。您可以通过使用这些属性分配类或仅添加内联来实现此目的。