Css 造型<form><label>使用“顯示：塊”不起作用</label></form>

Question

我有一個表格 label 我想顯示在表格的頂部。 我已經看到這可以通過將 CSS 顯示設置為阻止來完成，但在嘗試該方法后我沒有看到任何結果。 我已經確認 CSS 文件已正確鏈接，因為我可以很好地調整其他樣式因素。 我想了解發生這種情況的原因。 我很感激幫助。 感謝您的時間

'''
.reflectionForm label{
    display: block;
    font-size: 25px;
    font-weight: normal;
    color: green
}
'''

'''
function Reflection() {
    return (
        <div> Entry Page

        <form class="reflectionForm">
            <label for="newEntryId"> New Entry:
            <textarea type="text" id="newEntryId" name="newEntryName" rows="30" cols="75"/>
            </label>
       
        </form>
        </div>
    );
}
'''

Output

Answer 1

您只需要定位 text ，而不是整個 label 和里面的 textarea 。

您可以通過將文本放在<span>標記中並更改 CSS 選擇器以定位跨度來解決此問題：

function Reflection() {
    return (
        <div>
            Entry Page
            <form class="reflectionForm">
                <label for="newEntryId">
                    <span>New Entry:</span>
                    <textarea type="text" id="newEntryId" name="newEntryName" rows="30" cols="75"/>
                </label>
            </form>
        </div>
    );
}

.reflectionForm label span {
    display: block;
    font-size: 25px;
    font-weight: normal;
    color: green
}

現場演示：

 .reflectionForm label span { display: block; font-size: 25px; font-weight: normal; color: green }

 <div> Entry Page <form class="reflectionForm"> <label for="newEntryId"> <span>New Entry:</span> <textarea type="text" id="newEntryId" name="newEntryName" rows="30" cols="75"></textarea> </label> </form> </div>