Html 如何将文本框旁边的图像与CSS对齐？

我很难将文本框旁边的图像与CSS文件对齐

我已经尝试了这个解决方案，但输出是错误的，请检查下面的代码和附加的图像

多谢各位

aspx页面：

                <div class="pure-u-1 pure-u-md-1-3">
                    <label for="Date">Date</label>
                    <asp:TextBox ID="Date" runat="server" CssClass="pure-u-23-24"></asp:TextBox>
                    <img src="/Images/calen.gif" id="Img1" alt="Date" onmouseover="this.style.cursor='pointer'"
                        onmouseout="this.style.cursor='default'" class="image" />
                <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="Date"
                    PopupButtonID="Img1" Format="dd/MM/yyyy" Animated="true"></ajaxToolkit:CalendarExtender>
                <asp:RequiredFieldValidator ID="RequiredFieldValidatorDate" runat="server" ControlToValidate="Date"
                    SetFocusOnError="true" ErrorMessage="Date" Text="*" Display="Dynamic" ValidationGroup="Validation4" CssClass="validation-summary-errors-one"></asp:RequiredFieldValidator>
                </div>

.image {
    position: relative;
    top: 6px;
}

浏览器中的输出：

                <div class="pure-u-1 pure-u-md-1-3">
                    <label for="Date">Date</label>
                    <asp:TextBox ID="Date" runat="server" CssClass="pure-u-23-24"></asp:TextBox>
                    <img src="/Images/calen.gif" id="Img1" alt="Date" onmouseover="this.style.cursor='pointer'"
                        onmouseout="this.style.cursor='default'" class="image" />
                <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="Date"
                    PopupButtonID="Img1" Format="dd/MM/yyyy" Animated="true"></ajaxToolkit:CalendarExtender>
                <asp:RequiredFieldValidator ID="RequiredFieldValidatorDate" runat="server" ControlToValidate="Date"
                    SetFocusOnError="true" ErrorMessage="Date" Text="*" Display="Dynamic" ValidationGroup="Validation4" CssClass="validation-summary-errors-one"></asp:RequiredFieldValidator>
                </div>

.image {
    position: relative;
    top: 6px;
}

编辑#1

<img src="/Images/calen.gif" id="Date" alt="Date" onmouseover="this.style.cursor='pointer'"
    onmouseout="this.style.cursor='default'" style="float:left;" />

尝试使用

浮动：左，然后根据需要更改位置。
HTML:

<div class="pure-u-1" ...>
    <asp:TextBox ...></asp:TextBox>
    <img class="image" .../>
</div>

Pure-u-1类具有相对位置，未指定左/顶位置。但它成为了它的子元素相对/绝对/固定定位的起点。
遗憾的是，我不知道aspx或元素上的各种css类可能附加哪些样式。当我用最简单的html元素重新构建它时，它们都排成一行

我猜：

（不知道这是你的容器的全宽还是只是一个截图：）也许你的文本框太宽了，无法容纳图像，所以试着缩小尺寸并检查边距
将“显示：内联”添加到文本框和/或
将“垂直对齐：中间”添加到文本框或
在文本框中添加“float:left”，然后调整图像的位置
但我会避免使用float，因为这不是它的预期用途，并且会导致误导性代码

希望这有帮助
 尝试使用
float:left，必须设置元素的宽度，如下所示：

.pure-u-1{
    width: 400px;
    float: left;
}
.pure-u-1 label{
    width: 30px;
    float: left;
}
.pure-u-1 input{
    width: 300px;
    float: left;
}
.pure-u-1 img{
    width: 66px;
    float: left;
}

    <div class="pure-u-1 pure-u-md-1-3">
        <label for="Date">Date</label>
        <asp:TextBox ID="Date" runat="server" CssClass="pure-u-23-24"></asp:TextBox>
    <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="Date"
        Format="dd/MM/yyyy" Animated="true"></ajaxToolkit:CalendarExtender>
    <asp:RequiredFieldValidator ID="RequiredFieldValidatorDate" runat="server" ControlToValidate="Date"
        SetFocusOnError="true" ErrorMessage="Date" Text="*" Display="Dynamic" ValidationGroup="Validation4" CssClass="validation-summary-errors-one"></asp:RequiredFieldValidator>
    </div>

我创建了一个示例，希望这有助于如果您在aspx页面的标记中使用控件ajaxToolkit:CalendarExtender，为什么需要图像和CSS（您需要知道如何使用它们）来调用日历

根据此建议更改代码，只需单击该框即可更改日期值

希望这有帮助

    <div class="pure-u-1 pure-u-md-1-3">
        <label for="Date">Date</label>
        <asp:TextBox ID="Date" runat="server" CssClass="pure-u-23-24"></asp:TextBox>
    <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="Date"
        Format="dd/MM/yyyy" Animated="true"></ajaxToolkit:CalendarExtender>
    <asp:RequiredFieldValidator ID="RequiredFieldValidatorDate" runat="server" ControlToValidate="Date"
        SetFocusOnError="true" ErrorMessage="Date" Text="*" Display="Dynamic" ValidationGroup="Validation4" CssClass="validation-summary-errors-one"></asp:RequiredFieldValidator>
    </div>


日期
尝试使用
float
属性谢谢，但是如果更改div中的类并使用Pure-u-1类，我将丢失原始CSS格式，您是否能够将自己的类添加到父元素中？如果没有，是否可以添加任何自定义参数/值？然后可以将div[mytextbox=true]{position:relative；}用作CSS和HTML代码。有关更多选项，请参阅CSS3选择器列表-希望对您有所帮助。在ASP NET上的控制文本框中，无法添加样式属性。。。只有CssClass…在这种情况下，您不能在样式表中添加我上面建议的样式吗？所以：.pure-u-23-24{display:inline；vertical align:middle；}谢谢我试过了，我在html页面中没有更改。谢谢，但我的网页中没有唯一的元素日期，如果更改Div，网页中的所有其他Div都更改了…你可以为元素设置类，就像我第一个问题中的float属性请检查Edit#1，输出未更改。使用浮动属性的条件：宽度图像+宽度文本框>图像不能浮动非常感谢您的建议。。。它在工作！！！