Question

确实是一个简单的问题。如果我使用height：100px，则光标仍在输入框的中间开始。我想使用整个框，使光标从左上角开始，以提供更直观的段落编写体验。

我只是在填写表格。当我添加宽度时：*** px;您可以在扩展输入框的边缘键入内容，但是高度不会发生相同的变化：*** px;。

input {
  border: 1px solid black;
  border-radius: 5px;
  padding: 2px 0 2px 10px;
  width: 150px;
  height: 20px;
  margin: 5px 0 0 0;
}

.form {
  margin: 50px 0 100px 0;
}

.form>div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.form-box {
  margin: 0 0 20px 0;
}

.text-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.main-kart {
  width: 400px;
  height: 250px;
  float: right;
  margin: 5px 5px 5px 5px;
}

.main-engine {
  width: 300px;
  height: 200px;
  float: left;
}

.cat {
  width: 250px;
  height: 150px;
  float: right;
}

.description {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.description>input {
  width: 500px;
}

.sub-m {
  margin: 0 0 5px 0;
}

.desc-box {
  height: 100px
}

<div class="description">
  <label class="sub-m" for="Sub">Subject</label>
  <input class="form-box" type="text" id="Sub" maxlength="95" required>
  <label for="text-box">Description</label>
  <input type="text" id="text-box" class="desc-box" maxlength="200" required>
</div>

Answer 1

您无法更改输入控件的高度。如果您想撰写段落，请使用textarea html标签

Answer 2

如果您希望多行支持（如段落），请使用<textarea>而不是<input type="text">。 <input>仅会给您一行。

您可以使用<textarea>属性设置rows的默认高度，也可以通过CSS设置min-height。

textarea {
  width: 100%;
  /* min-height: 150px; */
}

<textarea name="comments" rows="8"></textarea>

Answer 3

您应该使用textarea而不是form { display: flex; flex-direction: column; align-items: center; }。这是一个多行纯文本编辑控件。

这是您的代码更新为input：

textarea

input {
  border: 1px solid black;
  border-radius: 5px;
  padding: 2px 0 2px 10px;
  width: 150px;
  height: 20px;
  margin: 5px 0 0 0;
}

textarea {
  border: 1px solid black;
  border-radius: 5px;
  padding: 2px 0 2px 10px;
  width: 500px;
}

.form  {
  margin: 50px 0 100px 0;
}

.form > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.form-box  {
  margin: 0 0 20px 0;
}

.text-box  {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.main-kart  {
  width: 400px;
  height: 250px;
  float: right;
  margin: 5px 5px 5px 5px;
}

.main-engine  {
  width: 300px;
  height: 200px;
  float: left;
}

.cat  {
  width: 250px;
  height: 150px;
  float: right;
}

.description  {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.description > input {
  width: 500px;
}

.sub-m {
  margin: 0 0 5px 0;
}
.desc-box  {
  height: 100px
}

如何扩大某人可以在输入字段中键入的区域？

3 个答案: