我试图样式化我的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>
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>