フォームが作品をラベルではなく、側面には、この作品

Question

ラベル：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.parent { 
 
    display: grid; 
 
    /* grid-template-areas: 
 
    "contact comments" 
 
    "... button";*/ 
 
    grid-template-rows: 12em; 
 
    grid-template-columns: 12em; 
 
    grid-gap: .8em; 
 
    background: yellow; // for debugging 
 
    padding: 0; 
 
} 
 

 
.lp { 
 
    // label properties 
 
    padding: 0.4em; //1.1em 
 
    background-color: cyan; 
 
} 
 

 
.ip { 
 
    // input properties 
 
    padding: 0.4em; //1.1em 
 
    margin-bottom: 1.5em; 
 
    background-color: lightyellow; 
 
} 
 

 
// maps areas to markup elements 
 
.lnam { grid-area: 1/1; } // label Name area -> label elem 
 
.inam { grid-area: 2/1; } // input Name area -> input elem 
 
.leml { grid-area: 3/1; } // ditto for Email 
 
.ieml { grid-area: 4/1; } 
 

 
.ltel { grid-area: 5/1; } // and Telephone 
 

 
.itel { grid-area: 6/1; }

<form class="parent"> 
 
    <div> 
 
    <label class="lp lnam" for="name">Name</label> 
 
    <input class="ip inam" type="text" id="name" required> 
 
    <label class="lp leml" for="email">Email</label> 
 
    <input class="ip ieml" type="text" id="email" required> 
 
    <label class="lp ltel" for="tph">Phone</label> 
 
    <input class="ip itel" type="text" id="tph" required> 
 
    </div> 
 
</form>

をしかし側label sが仕事を得ることができませんでした。 input要素はラベルの下に配置されますが、同じ行のlabelに従う必要があります。 以下のコードは、同じマークアップで上で動作しているコードとほぼ同じです。 相違：grid-area仕様とgrid-template-columns（側labelのための2つの列）

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.parent { 
 
    display: grid; 
 
    /* grid-template-areas: 
 
    "contact comments" 
 
    "... button";*/ 
 
    grid-template-rows: 4em; 
 
    grid-template-columns: 150px 200px; 
 
    grid-gap: .8em; 
 
    background: yellow; 
 
    padding: 0; 
 
} 
 

 
.lp { 
 
    padding: 0.4em; //1.1em 
 
    //border: 1px solid blue; 
 
    background-color: cyan; 
 
} 
 

 
.ip { 
 
    padding: 0.4em; //1.1em 
 
    //border: 1px solid blue; 
 
    margin-bottom: 1.5em; 
 
    background-color: lightgreen; 
 
} 
 

 
.lnam { 
 
    grid-area: 1/1 /2/2; 
 
} // area -> element 
 

 
.inam { 
 
    grid-area: 1/2 /2/3; 
 
} 
 

 
/* .leml { grid-area: 3/11; } 
 
.ieml { grid-area: 4/1; } 
 
.ltel { grid-area: 5/1; } 
 
.itel { grid-area: 6/1; } */

<form class="parent"> 
 
    <div> 
 
    <label class="lp lnam" for="name">Name</label> 
 
    <input class="ip inam" type="text" id="name" required> 
 
    <!--<label class="lp leml" for="email">Email</label> 
 
<input class="ip ieml" type="text" id="email" required> 
 
<label class="lp ltel" for="tph">Phone</label> 
 
<input class="ip itel" type="text" id="tph" required>--> 
 
    </div> 
 
</form>

Iは、FirefoxとChromeの両方を使用し、同一の結果を得ました。 私は何が間違っていますか？

Answer 1

グリッドアイテムはグリッドコンテナの直接の子であり、すべての子孫ではありません。そこで、セレクタ.parentをparent > divに変更して、グリッド項目がこのプロパティがなくても自動的に整列するため、grid-areaのプロパティを削除して削除しました。

残りの幅をすべて取るように、ラベルの列をコンテンツとテキストボックスで幅を取るとします。また、グリッドトラックの高さを12emの高さにしたくないと思います。だからgrid-template-columnsを変更し、grid-temaplate-rowsを削除しました。結果の

デモ：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.parent > div { 
 
    display: grid; 
 
    /* grid-template-areas: 
 
    "contact comments" 
 
    "... button";*/ 
 
    grid-template-columns: auto 1fr; 
 
    grid-gap: .8em; 
 
    background: yellow; // for debugging 
 
    padding: 0; 
 
} 
 

 
.lp { 
 
    // label properties 
 
    padding: 0.4em; //1.1em 
 
    background-color: cyan; 
 
} 
 

 
.ip { 
 
    // input properties 
 
    padding: 0.4em; //1.1em 
 
    margin-bottom: 1.5em; 
 
    background-color: lightyellow; 
 
}

<form class="parent"> 
 
    <div> 
 
    <label class="lp lnam" for="name">Name</label> 
 
    <input class="ip inam" type="text" id="name" required> 
 
    <label class="lp leml" for="email">Email</label> 
 
    <input class="ip ieml" type="text" id="email" required> 
 
    <label class="lp ltel" for="tph">Phone</label> 
 
    <input class="ip itel" type="text" id="tph" required> 
 
    </div> 
 
</form>