形成*品牌的作品，但不与侧标签

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>