Question

我的文本区域是什么样的：

function getTextArea() {
    let textArea = ($('<textarea/>', {
        col: 50,
        row: 4,
        'placeholder': placeholderRandomizer(),
        'maxLength': 200,
        'class': 'form form-control',
        'id': 'textArea'
    }));
    return textArea;
}

我在哪里以及如何附加它：

$(function () {
    let con = getEblockRow();
    let block = getEblock().append(getTextArea(), submitButton());
    con.append(block);
    $('#form').append(con);
});

我现在想对齐文本区域中心，而又不会失去它的响应能力。但是无论我尝试什么，我都必须使用像素或大众，但是当我尝试使页面保持响应速度时，两者都没有真正的帮助。我确实找到了此链接，但并没有真正帮助我进一步：https://www.sololearn.com/Discuss/899122/how-to-align-textarea-to-center-of-the-page和Align textarea in form。

HTML：

    <body>
        <div class="container">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h1>test</h1>
                </div>
                <div class="panel-body">
                    <div class="ChatBox">
                    </div>
                        <form action="index.php" action="POST" id="form">
                        </form>
                </div>
                <div class="panel-footer">
                    <h1>test</h1>
                </div>
            </div>
        </div>
    </body>
</html>

和我的CSS：

* {
    box-sizing: border-box;
}

body {
    animation-name: fadeIn;
    animation-duration: 2s;
}

@keyframes fadeIn {
    from{opacity: 0;}
    to{opacity: 1;}
}

form {
    margin: 0 auto;
}

textarea {
    resize: none;
}

#textArea::placeholder {
    opacity: 0.4;
    color: red;
}

#ChatBox {
    background-color: blue;
    height: 65vh;
    width: 30vw;
    overflow: auto;
    margin: 0 auto;
}

无法对齐我的文本区域而不会失去响应能力

0 个答案: