無論如何將占位符文本放在輸入字段上方而不是放在里面

Question

所以我基本上是在制作一個表格，但我被要求將占位符文本放在文本上方，就像我需要制作的表格一樣

但我不知道該怎么做。 我嘗試將文本作為 label 放置在輸入字段上，但是當我更改瀏覽器的大小時，alignment 到處都是，所以我想讓 label 與其上方的輸入字段對齊。

這是我嘗試做的事情：

 .row { display: flex; justify-content: space-around; padding: 10px; }

 <div class="row"> <:-- Name of Company --> <label class="comp" for="company" style="left; 40px;">Company</label> <input type="text" id="company" name="company" placeholder="Company" /> <!-- Clients First Name --> <label class="comp" for="firstname">First Name</label> <input type="text" id="firstname" name="firstN" placeholder="First Name" /> </div>

但我得到的是這個。

有沒有人可以幫我解決這個問題？

Answer 1

將<input />移到<label />內部並display: block; 它。 如果要單獨設置文本樣式，請將其包裝在<span />中。

 .row { display: flex; justify-content: space-around; padding: 10px; } input { display: block; }

 <div class="row"> <!-- Name of Company --> <label class="comp"> Company <input type="text" id="company" name="company" placeholder="Company" /> </label> <!-- Clients First Name --> <label class="comp" for="firstname"> First Name <input type="text" id="firstname" name="firstN" placeholder="First Name" /> </label> </div>

Answer 2

占位符與 Label。
您不能將輸入占位符文本移到指定輸入之外。 占位符文本由瀏覽器嚴格處理。 您只能使用placeholder="" HTML 屬性修改內容，並使用 CSS pseudo class ::placeholder設置樣式。

而是像這樣使用 label HTML 元素：
（參考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label ）

<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

在輸入上方顯示 Label。
現在，您提到您的 label 出現在輸入的左側而不是上方？ 您需要像這樣設置 CSS 的樣式。 添加以下 CSS 標記：

label {
    display: block;
}

我還建議，但不是必需的，將輸入字段上的顯示元素也設置為阻止。

input {
    display: block;
}

為什么？
默認情況下 label 呈現為display: inline; 或display: inline-block; 由您的瀏覽器用戶代理。 將其設置為display: block; 將確保它始終出現在上方而不是與輸入內聯。