形成頂級品牌的作品，但不與側標籤

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 S）

* { 
 
    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>

我用Firefox和鉻，得到了相同的結果。 我在做什麼錯？

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>