asp.net - 文本区域 (asp :Textbox TextMode ="Multiline") overlapping buttons

Question

我遇到了表单按钮与 asp:Texbox 重叠且 TextMode 设置为多行的问题: alt text http://www.nango.co.uk/forums/uploads/1251792203/gallery_2_3_18518.jpg

代码如下:

<asp:Panel ID="pnlGiftStep" Visible="false" runat="server">
                <img src="/images/shopping-cart/form-separator.png" alt="separator" />
                <div class="form-title">GIFT OPTIONS</div>
                <div class="row">
                    <asp:TextBox ID="txtGiftName" Height="31" Width="323" BorderStyle="None" Font-Names="Arial"
                        Font-Size="116.7%" runat="server"></asp:TextBox>
                    <cc1:TextBoxWatermarkExtender ID="wmeGiftName"
                        TargetControlID="txtGiftName" WatermarkText="Gift Name"
                        WatermarkCssClass="watermark" runat="server"></cc1:TextBoxWatermarkExtender>
                </div>
                <br class="clear" />
                <div class="row">
                    <asp:TextBox ID="txtGiftMessage" Rows="5" Width="323" BorderStyle="None" 
                        Font-Names="Arial" TextMode="MultiLine"
                        Font-Size="116.7%" runat="server"></asp:TextBox>
                    <cc1:TextBoxWatermarkExtender ID="wmeGiftMessage"
                        TargetControlID="txtGiftMessage" WatermarkText="Gift Message"
                        WatermarkCssClass="watermark" runat="server"></cc1:TextBoxWatermarkExtender>
                </div>
                <br class="clear" />
                <div class="button-row">
                    <asp:ImageButton ID="imbShippingDetails" 
                        ImageUrl="/images/shopping-cart/ship-details-btn.png"
                        OnClick="ReturnToShipping"
                        ValidationGroup="shipping"
                        runat="server" />
                    <asp:ImageButton ID="imbPayDetails" ImageUrl="/images/shopping-cart/pay-details-btn.png"
                        ValidationGroup="pay"
                        runat="server" />
                </div>
                <br class="clear" />
            </asp:Panel>

这是 CSS:

.row
{
    float:left;
    height:40px;
}

.button-row
{
    float:left;
    width:323px;
    text-align:right;
}

有什么办法可以阻止它吗？

谢谢。

Answer 1

它的布局完全按照您的要求进行。您分配的类 .row 的高度属性为 40px。由于您指定了容器 div 的高度只有 40 像素高，这就是为什么您的按钮出现在它上面的原因。如果您将 style="overflow: hidden" 添加到包含 textarea 的 div，您会注意到大部分 textarea 都消失了。您要么需要添加覆盖高度属性的新样式，要么需要从该 div 中一起删除该类。

在处理这些类型的布局问题时，将 border 或 background-color 属性添加到您怀疑的类中可能会有所帮助，以帮助您可视化是什么继续。在这种情况下，您的多行文本框会溢出到 40 像素的 div 之外。