是否有更好的方法來實作這種布局？ -有解無憂

我一直在撓頭，試圖實作起初看起來相當簡單的布局，但我仍然沒有辦法。基本上是一個水平居中的標題和下面的表單。我遇到困難的部分是將輸入與標題垂直對齊。

下面是我的解決方案和代碼的圖片

。

<div class="main"> 
    <h3>客戶門戶登錄</h3> 
    <label for="cid"/span>> 客戶ID</label>。
    <label for="password"/span>> Password</label>
    <form id="loginForm"/span>> </form>>
    < input form="loginForm" id="cid" name="cid" type="text" required> 
    < input form="loginForm" id=" password" name="password" type="password" required> 
    < input type="submit" value="LOG IN"> 
</div>/span>

.main {
    display: grid;
    grid-gap: 1.5rem;
    align-items: center;
    border-top: 9px solid #0993B8;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "title title"; grid-template-areas: "title title"
        "labelCid inputCid 。"
        "labelPasswd inputPasswd ."
        ". inputSubmit ."
}

.main h3 {
    text-align: center;
    grid-area: title;
}

label[for="cid"]  {
    justify-self: end;
    grid-area: labelCid;
}

label[for="password"]  {
    justify-self: end;
    grid-area: labelPasswd;
}

input[id="cid"]{
    grid-area: inputCid;
}

input[id="password"]  {
    grid-area: inputPasswd;
}

input[type="submit"]  {
    justify-self: center;
    grid-area: inputSubmit;
}

這樣做的問題是，我在網格中包含了標題，我不能單獨為表單設定樣式，以添加填充和背景顏色。有什么更好的方法可以做到這一點嗎？

uj5u.com熱心網友回復：

為什么不把所有需要的元素放在表單中，并將display:grid應用于該的布局？

。

span class="hljs-selector-class">.main {
  width: 90%;
  margin: auto;
}

form {
  display: grid;
  background: gray;
  grid-gap: 1.5rem;
  padding-bottom: 1.5rem;
  ;
  align-items: center;
  border-top: 9px solid #0993B8;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "title標題" "labelCid輸入Cid。" "labelPasswd輸入Passwd。" " 。
}

.main h3 {
  text-align: center;
  grid-area: title;
}

label[for="cid"]  {
  justify-self: end;
  grid-area: labelCid;
}

label[for="password"]  {
  justify-self: end;
  grid-area: labelPasswd;
}

input[id="cid"]{
  grid-area: inputCid;
}

input[id="password"]  {
  grid-area: inputPasswd;
}

input[type="submit"]  {
  justify-self: center;
  grid-area: inputSubmit;
}

<div class="main"> /span>
  <h3>客戶門戶登錄</h3> 
  <form id="loginForm"/span>>
    <label for="cid"/span>> 客戶ID</label>。
    <label for="password"/span>> Password</label>

    < input form="loginForm" id="cid" name="cid" type="text" required> 
    < input form="loginForm" id=" password" name="password" type="password" required> 
    < input type="submit" value="LOG IN"> 
  </form>/span>
</div>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/331863.html

標籤：

上一篇：在rapidjson檔案中搜索嵌套屬性時IsObject()屬性不一致

下一篇：讓整個區域都可以點擊