css - 一组两个元素到 'add' 到我的文本区域不与页面对齐

Question

所以我有一个文本区域的“输入组”和一个包含字符数的简单 div。

这是它的样子，但它不应该那么长，因为我设置了最小/最大宽度并使用 position: absolute 把它搞砸了。

这是我正在使用的代码:

textarea {
    min-width: 120px;
    min-height: 90px;
    padding: 8px 10px;
    background: #FFF;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
    outline: none;
    padding: 8px 10px;
    box-shadow: inset 0 1px 2px rgba(#E0E0E0, .50), 0 -1px 1px #FFF, 0 1px 0 #FFF;

    @include transition(all .2s ease-in-out);

    @include placeholder {
        font-family: 'Titillium Web', sans-serif;
    }
}
textarea:focus {
    border: 1px solid lighten(#3498db, 10);

    @include box-shadow(0px, 0px, 6px, rgba(lighten(#3498db, 10), .5), false);
}
.textarea-group {
    //position: absolute; //FIX?
    min-width: 120px;
    min-height: 90px;

    textarea[limit] {
        display: block;
        resize: none;
        border-bottom: none;
        border-bottom-left-radius: 0; border-bottom-right-radius: 0;
        margin: 0;
        position: relative;
        width: 100%;
    }
    .chars {
        display: block;
        margin: 0;
        position: relative;
        width: 100%;
        padding: 8px 10px;
        background: #FAFAFA;
        color: #999;
        font-size: 11px;
        border: 1px solid #E0E0E0;
        border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;
    }
}

Answer 1

首先，min-width 和 min-height 只有在您不希望 textarea 小于您在浏览器调整大小时指定的数字时才有用。您需要的是最大宽度和最大高度。

其次，限制高度和体重的最佳做法是将以下属性添加到您的文本区域:

rows="number" cols="number"

例如:

<textarea placeholder="some text" rows="5" cols="50"></textarea>