选择和textarea未正确对齐

Question

我遇到了CSS / HTML令人讨厌的问题。

如下图所示：

我想要textarea并选择正确对齐，但它不起作用。

这些是元素的CSS：

主要div（元素所在的位置）：

#janela
{
    position: absolute;
    width: auto;
    height: auto;
    top: 30%;
    left: 40%;
    margin-top: -140px;
    margin-left: -170px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

选择CSS：

#usuario
{
    border-color: black;
    width:100%;
    height: 30px;
    font-size: 16px;
}

Textarea css：

    .post-body
{
    width: 580pt;
    height: auto;
    padding: 5px 5px 5px 5px;
    font-family: 'Segoe UI',sans-serif;
    font-size: 16px;
    color: black;
    margin: 0 0 20px 0;
    resize:vertical;
}

按钮css：

    .newPostContent.btn
{
    width: 100%;
    line-height: 45px;
}

我使用100％宽度作为兼容性内容，那么如何正确对齐这些元素呢？

Answer 1

大多数表单元素都有默认边框和填充。您可以设置box-sizing:border-box以使其包含在总框大小中。

＆＃13;

＆＃13;

select,
input,
textarea {
  width: 100%;
  box-sizing: border-box;
}

＆＃13;

<p>
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</p>
<p>
  <textarea></textarea>
</p>
<p>
  <input type="submit" value="Submit" />
</p>

＆＃13;

＆＃13;

＆＃13;