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

Question

我正在尝试对齐文本框和标题。 它们在div容器下。 如果将标题和文本框的宽度设置为100％，它们可以对齐。 但是，当我在文本框中添加边框（宽度：10像素）时，我不知道如何对齐它们。 我试图将文本框的宽度设置为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; 它将忽略您的边框或填充尺寸，并保持父尺寸。