Question

我正在使用HTML CSS输入。我想知道如何做到这一点，当我在框内输入文本时，该文本开始显示在框的左上方？

当前它显示在我框的中央，这里是我的作品的一个可复制的小例子：

/*** messages ***/ 
.messages_flow{ 
    grid-area: messages_flow; 
    width: 85%; 
    height: 85% ;
    border-radius: 10px; 
    overflow-y: auto;
    margin: auto;
    display:flex; 
    flex-direction : column; 
    align-items: end; 
    justify-content: flex-end;
    background-color: white;  
    padding-top: 1em;
    padding: 15px 10px  ; 
    /* padding-bottom: 15px;  */

}

.message_form { 
    grid-area: message_form;  
    width:  16.76em ;
   
    word-wrap: break-word;   
    /* margin-top: 5em;  */
    display:flex; 
    justify-content: center;
    align-items: center;  
}

.message_form  input[name="message"] { 
    text-align: end;  
    width:  16.76em ; 
    height: 4em;
    justify-self: start;
    margin-right: 1em;
    margin-top: 0.5em; 
} 
form, input { 
    border-radius: 10px; 
}

  <form
  class="message_form"
  onSubmit={this.send}
  >
    <input  
    name="message" 
    type="text"  />
    <input id="send" type="submit"                   value="Send" />
</form>

任何提示都会很棒，谢谢

Answer 1

只需从输入CSS中删除text-align: end;。

对于 top （左对齐），您需要使用textarea元素，而不是常规文本输入。

/*** messages ***/ 
.messages_flow{ 
    grid-area: messages_flow; 
    width: 85%; 
    height: 85% ;
    border-radius: 10px; 
    overflow-y: auto;
    margin: auto;
    display:flex; 
    flex-direction : column; 
    align-items: end; 
    justify-content: flex-end;
    background-color: white;  
    padding-top: 1em;
    padding: 15px 10px  ; 
    /* padding-bottom: 15px;  */

}

.message_form { 
    grid-area: message_form;  
    width:  16.76em ;
   
    word-wrap: break-word;   
    /* margin-top: 5em;  */
    display:flex; 
    justify-content: center;
    align-items: center;  
}

.message_form  input[name="message"] { 
    width:  16.76em ; 
    height: 4em;
    margin-right: 1em;
    margin-top: 0.5em; 
} 
form, input { 
    border-radius: 10px; 
}

<form
  class="message_form"
  onSubmit={this.send}
  >
    <input  
    name="message" 
    type="text"  />
    <input id="send" type="submit"                   value="Send" />
</form>

Answer 2

如果需要多行，则可以改用textarea元素。然后光标将从左上方开始。

<textarea name="message" />

如果只需要左对齐，则删除text-align: center行即可解决问题。

另一种选择是，如果要使输入元素只有一行，则可以使用填充到元素的顶部和底部，而不是使用高度来使文本元素更高，而不是使用高度来使文本元素更高。例如：

#message {
  padding-top: 5px;
  padding-bottom: 15px;
}

<input id="message" type='text' name='message'>

Answer 3

我认为最好的办法是在输入中添加text-align: left;（或按照Johannes的建议在输入CSS中删除text-align），但我想不出一种垂直对齐输入内容的方法使用我对CSS的了解到顶部。但是，您可以轻松设置<textarea></textarea>的样式，以满足您的要求。希望这会有所帮助。

/*** messages ***/ 
.messages_flow{ 
    grid-area: messages_flow; 
    width: 85%; 
    height: 85% ;
    border-radius: 10px; 
    overflow-y: auto;
    margin: auto;
    display:flex; 
    flex-direction : column; 
    align-items: end; 
    justify-content: flex-end;
    background-color: white;  
    padding-top: 1em;
    padding: 15px 10px  ; 
    /* padding-bottom: 15px;  */

}

.message_form { 
    grid-area: message_form;  
    width:  16.76em ;
   
    word-wrap: break-word;   
    /* margin-top: 5em;  */
    display:flex; 
    justify-content: center;
    align-items: center;  
}

.message_form  textarea[name="message"] { 
    width:  16.76em ; 
    height: 4em;
    margin-right: 1em;
    margin-top: 0.5em;
    resize: none;
}

form, input, textarea { 
    border-radius: 10px; 
}

<form class="message_form" onSubmit={this.send}>
    <textarea name="message" rows="1"></textarea>
    <input id="send" type="submit" value="Send" />
</form>

CSS-如何使输入到输入框中的文本开始显示在框的左上方？

3 个答案: