设置form的label为display:block无效问题排查

问题根源 #

你当前的JSX里，<textarea>是嵌套在<label>标签内部的，即便给label设置了display:block，textarea会作为label的子元素紧跟在label文本之后显示，不会自动换行到label下方，所以达不到“label在表单顶部”的效果。

解决方案 #

方案1：拆分label与textarea（推荐）

将textarea从label中移出，让两者成为同级元素，原CSS即可生效：

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

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

注：JSX中需用className替代class，htmlFor替代for，这是React的语法规范。

方案2：不修改结构，用Flex布局实现垂直排列

如果不想调整DOM结构，给label添加flex垂直布局：

.reflectionForm label{
    display: flex;
    flex-direction: column;
    font-size: 25px;
    font-weight: normal;
    color: green;
    /* 可选：给label文本和textarea添加间距 */
    gap: 10px;
}

同时记得修正JSX里的属性名：

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

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

内容的提问来源于stack exchange，提问作者CreativeDesign