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的height属性为40px。由于您指定了容器div的高度仅为40 px，这就是为什么按钮出现在它上面的原因。如果您在持有textarea的div中添加了style="overflow: hidden"，您会注意到该文本区域的大部分都消失了。您需要添加一个覆盖height属性的新样式，或者从该div中删除所有类。

在处理这些类型的布局问题时，向您怀疑的类添加border或background-color属性会有所帮助，以帮助您直观地了解正在发生的事情。在这种情况下，您的多行文本框溢出40px div。

Textarea（asp：Textbox TextMode =“Multiline”）重叠按钮

1 个答案: