Question

我很难将文本框旁边的图像与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>

CSS文件：

.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;" />

Answer 1

如果您在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>

Answer 2

尝试在.image类上使用float: left;，然后根据需要更改定位。

Answer 3

HTML：

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

CSS：

.pure-u-1 { position: relative; }
.image { position: absolute; left: .5em; top: .2em; }

Pure-u-1类具有相对位置，没有指定左/顶位置。但它成为它的儿童元素的相对/绝对/固定定位的起点。

Answer 4

可悲的是，我不知道aspx或者哪些样式可能会附加到元素上的各种css类中。当我使用最简单的html元素重建它时，它们都排成一行。

我的猜测：

（不知道这是你的容器的整个宽度还是剪切截图:)也许你的文本框太宽而不适合图像，所以尝试缩小尺寸并检查你的边距。
将“display：inline”添加到您的文本框和/或
将“vertical-align：middle”添加到文本框或
将“float：left”添加到文本框中，然后调整图像的位置。

我会避免使用float，因为这不是它的预期用途，并导致误导代码。

希望这有帮助！

Answer 5

尝试使用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;
}

我创建了示例，希望这有助于jsfiddle

如何使用CSS将文本框旁边的图像对齐？

5 个答案: