Question

我正在尝试样式化HTML页面，并希望将文本输入保持相同的尺寸。

我已经尝试在CSS中指定文本区域选择器，但是在Opera中却无法使用。调整大小标记在Mozilla firefox中消失了，但是不幸的是，文本区域的大小并没有达到我的期望。

<textarea style="resize:none" rows="1" cols="22" th:id="inputWord" name="inputWord" ></textarea>

有效，但是我不知道为什么CSS在这里没有影响。

textarea {
  rows: 1;
  cols: 22;
  resize: none;
}

<div class="container">
  <div class="container-inner">
    <div class="area">
      <form th:action="@{/}" method="post">
        <textarea th:id="inputWord" name="inputWord"></textarea>
        <textarea th:id="inputTranslation" name="inputTranslation"></textarea>
        <textarea th:id="language" name="language" value="English"></textarea>
        <input type="submit" th:id="addWord" value="add" />
      </form>
    </div>
    <div class="area">
      <form th:action="@{/delete}" method="post">
        <textarea th:id="inputWordDelete" name="inputWordDelete"></textarea>
        <textarea th:id="inputTranslationDelete" name="inputTranslationDelete"></textarea>
        <textarea th:id="languageDelete" name="languageDelete" value="English"></textarea>
        <input type="submit" th:id="deleteWord" value="delete" />
      </form>
    </div>
  </div>
</div>

Answer 1

rows和cols是<textarea>的属性，而不是CSS属性：

textarea {
  resize: none;
}

<div class="container">
  <div class="container-inner">
    <div class="area">
      <form th:action="@{/}" method="post">
        <textarea rows="1" cols="22" th:id="inputWord" name="inputWord"></textarea>
        <textarea rows="1" cols="22" th:id="inputTranslation" name="inputTranslation"></textarea>
        <textarea rows="1" cols="22" th:id="language" name="language" value="English"></textarea>
        <input type="submit" th:id="addWord" value="add" />
      </form>
    </div>
    <div class="area">
      <form th:action="@{/delete}" method="post">
        <textarea rows="1" cols="22" th:id="inputWordDelete" name="inputWordDelete"></textarea>
        <textarea rows="1" cols="22" th:id="inputTranslationDelete" name="inputTranslationDelete"></textarea>
        <textarea rows="1" cols="22" th:id="languageDelete" name="languageDelete" value="English"></textarea>
        <input type="submit" th:id="deleteWord" value="delete" />
      </form>
    </div>
  </div>
</div>

但是，您可以改用CSS的height和width属性。使用em单位可使数字pretty close分别等于rows和cols：

textarea {
  height: 1em;
  width: 22em;
  resize: none;
}

<div class="container">
  <div class="container-inner">
    <div class="area">
      <form th:action="@{/}" method="post">
        <textarea th:id="inputWord" name="inputWord"></textarea>
        <textarea th:id="inputTranslation" name="inputTranslation"></textarea>
        <textarea th:id="language" name="language" value="English"></textarea>
        <input type="submit" th:id="addWord" value="add" />
      </form>
    </div>
    <div class="area">
      <form th:action="@{/delete}" method="post">
        <textarea th:id="inputWordDelete" name="inputWordDelete"></textarea>
        <textarea th:id="inputTranslationDelete" name="inputTranslationDelete"></textarea>
        <textarea th:id="languageDelete" name="languageDelete" value="English"></textarea>
        <input type="submit" th:id="deleteWord" value="delete" />
      </form>
    </div>
  </div>
</div>

尽管在Opera浏览器的CSS文件中添加了“ resize：none”，但我的HTML中的textarea仍可调整大小

1 个答案: