html - CSS - 如何使我输入的文本开始显示在框的左上角？

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;。

对于顶部(和左侧)对齐，您需要使用 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>