Question

我试图对齐文本框和标题。它们位于div容器下。如果我将标题的宽度和文本框的宽度设置为100％，它们可以对齐。但是，当我将边框（宽度：10px）添加到文本框时，我不知道如何对齐它们。我试图将文本框宽度设置为99％，但它并不总是很好地对齐。我不想只为所有宽度使用px。

我想知道如何处理这个问题？谢谢你的任何建议！

<div class="panel" style="float:left;">
    <div class="Header" style="width:100%">
        <p class="h">header name</p>
    </div>
    <div class="ContentTB1">
        <asp:TextBox ID="text1" cssclass="txt1" runat="server" TextMode="MultiLine" enabled="false"></asp:TextBox>
    </div>

CSS

textarea {
    height: 150px;
    border: 10px  solid #e6e6fa;
    width: 99%;
    transition: all 0.5s ease;
}

textarea:focus {
    height: 500px;
}

Answer 1

如果您不需要它在旧版浏览器上工作，您可以尝试在宽度中使用calc，或者使用box-sizing。

尝试以下方法之一：

width:calc(100% - 20px)边框使用20px（左边10个，右边10个）

或

box-sizing:border-box;它将忽略您的边框或填充大小，并将保留父级大小。

当textarea上有边框时，css对齐标题和textarea

1 个答案: