Question

如何在HTML中设置文本区域的高度和宽度？

它们似乎被忽略了，而行和 cols 的默认值用于确定</code>的大小。 </p> <p>我正在使用Firefox 62查看<a href="https://www.jamescobban.net/BlogPost.php" rel="nofollow noreferrer">此页面</a>。</p> <p> <div class =“ snippet” data-lang =“ js” data-hide =“ false” data-console =“ true” data-babel =“ false”> <div class =“ snippet-code”> <pre class =“ snippet-code-css lang-css prettyprint-override”> <code> textarea { 字体家族：衬线；文字对齐：左；边框顶部：3px纯黑色；左边框：3px纯黑色； border-bottom：3px实心＃808080; 右边框：3px实心＃808080; } div.row {white-space：nowrap; } label.column1 { 字体家族：sans-serif; font-weight：粗体; 文字对齐：右；垂直对齐：顶部；填充：0px 3px 0px 3px; 页边距：1px；向左飘浮; 宽度：15em; } </code> </pre> <pre class =“ snippet-code-html lang-html prettyprint-override”> <code> <div class =“ row” id =“ blogMsgRow”> <label class ='column1'for ='消息'> 信息： </label> <textarea name =“ message” id =“ message” placeholder =“ [输入消息]” height = '50％'width = '80％'>

Answer 1

您可以在<!DOCTYPE html> <html> <head> <title> ********** </title> <link type="text/css" rel="stylesheet" href="styles/styles.css" /> </head> <body> <header> <nav>  </nav> </header> <div class="main_banner">  </div> <div class="main_content"> </div> </body> </html>中设置width和height。
css标签没有<textarea>和width属性。
除非父元素height具有固定的高度，否则百分比height将不起作用。

div

Answer 2

谢谢您的建议。我将HTML更改为：

<div class="row" id="blogMsgRow">
  <label class='column1' for='message' id="msgLabel">
    Message:
  </label>
  <textarea name="message" id="message" placeholder="[enter message]"
       rows=15 style="width=80%;"></textarea>
</div>

但是宽度仍然被忽略。所以我尝试使用Javascript设置宽度：

        var msgLabel    = document.getElementById('msgLabel');
        var textwidth   = window.innerWidth - msgLabel.offsetWidth - 10;
        element.style.width = textwidth + 'px';
        alert("97: set element.style.width=" + textwidth + 'px');
        element.focus();    // make it the current input element
        element.select();   // select all text

这解决了问题。

我不想设置cols和row规范，因为它们取决于字体尺寸。而且cols是一个很笨的单元，用于可变宽度的字体。

`<textarea>`忽略`width`和`height`属性

2 个答案: