在此图像中,您会看到相同元素的两个版本。顶部是我得到的,底部是我想要结束的。当然,图像的底部与标签中的文本和文本框中的文本对齐,但我需要它与文本框的框对齐。我在 CSS 方面有点新手,到目前为止我尝试过的事情并没有让我脱离困境。
控件编码如下:
<asp:Label ID="TimeTextRequiredLabel" runat="server" Text="*"></asp:Label>
<asp:Label ID="TimeTextLabel" runat="server" Text="Time: "></asp:Label>
<asp:TextBox ID="TimeTextBox" runat="server" ReadOnly="false" Width="100"></asp:TextBox>
<asp:Image ID="TimePickerImageButton" runat="server" BorderWidth="0"
Width="34" Height="21" CssClass="TimePickerImage"
ImageUrl="~/UserControls/Images/ClockPicker.gif"
ToolTip="Pick a time." />
我的 CSS 中应该包含什么,在“TimePickerImage”类中以向左和向下移动几个必要的像素?
编辑添加:
最终选择了@JuanMendes 解决方案,以及这个类:
<style type="text/css">
.TimePickerImage {
position: relative;
top: .2em;
right: .3em;
}
</style>
这正好在我需要的地方紧贴它。谢谢!下一个任务是认真学习 CSS。到目前为止,我一直在用它玩脚本小子。
进一步编辑添加:
我已经尝试了@MarcAudet 和@JuanMendes 提出的所有其他变体,上面的代码效果最好。我想我不太在乎是否符合一些理论上的“理想”,而是让事情达到我需要的结果。