gpt4 book ai didi

html - 如何垂直顶部对齐 INPUT 文本元素中的文本?

转载 作者:太空宇宙 更新时间:2023-11-04 12:36:30 24 4
gpt4 key购买 nike

我有一个高大的 INPUT (type=text) 元素,其大小为 100%。包含元素具有特定高度(这是动态的)。

我想要的是能够将文本放在 INPUT 元素的顶部。我见过 few answers使用填充使其垂直居中,但我无法将文本放置在元素的顶部。我无法设置元素的高度。

示例 HTML(或 JSFiddle):

<body>
<div class="outer">
<input type="text" value ="textcontent"></input>
</div>
</body>

和 CSS:

body { background-color:gray;}

.outer {
height:480px;
background-color:pink;
margin-top:100px;
}

input {
height:100%;
background-color:lightgray;
padding-top:0px;
line-height:100px;
}

不设置元素的高度能做到吗?我需要支持的浏览器:Chrome、FF、IE9 和 IE11。

谢谢戴夫

最佳答案

如果您只想输入元素并实现此目的,请设置 padding-bottom 而不是高度。

设置高度后,默认情况下文本将显示在元素的中间。

input {
padding-bottom: 462px;
background-color:lightgreen;
}

http://jsfiddle.net/yf5f82vx/1/

关于html - 如何垂直顶部对齐 INPUT 文本元素中的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27249438/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com