如何在 HTML 和 CSS 中對齊輸入 HTML 標簽和文本區域（聯系頁面樣式）

Question

我想復制這種樣式的聯系頁面。 我無法讓我的代碼像這樣對齊，這是我的代碼：我正在努力解決這個問題。 請幫助示例聯系頁面下面是我的代碼：

        <table width="400px" >
            
            <tr>
                <td  >
<span>Name</span>
<input type="text" name="name" id="name">

<div  >
    <span>Email</span>
    <input type="email" name="email" id="email">
</div>

                </td>
               
                <td class="TextArea" >
<textarea name="description" id="description" cols="30" rows="10"></textarea>
                </td>
            </tr>

        </table>

這是CSS

.TextArea {
    
    padding-top: 120px;
    padding-left: 100px;
}

Answer 1

您可以使用 CSS 作為頁面布局。 Flexbox 和 Css 網格對此非常有用。 您還可以檢查要復制的頁面的代碼。

下面是一個示例，說明您可以如何處理 model 頁面的樣式。

HTML：

  <body>
    <form>
      <input type="text" placeholder="Your name" />
      <input type="email" placeholder="Your email" />
      <input type="text" placeholder="Your phone" />
      <textarea rows="4" cols="50" placeholder="Your message*"></textarea>
      <input type="submit" value="SEND MESSAGE" />
    </form>
  </body>

CSS：

html,
body {
  margin: 0;
  background-color: #222;
  width: 100%;
  height: 100%;
  /*Used to center the form*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-auto-flow: column;
}
textarea {
  grid-area: 1 / 2 / 4 / 3;
  padding: 10px;
}

input {
  padding: 10px;
}
input[type="submit"] {
  grid-area: 4 / 1 / 5 / 3;
  background-color: darkred;
  color: white;

  font-size: 1.1em;
  font-weight: 600;
  border-radius: 5px;
  border: none;
}

結果：

Answer 2

也許是這樣的？？

 .getintouch { display:grid; grid-template-columns: auto auto; grid-gap:1rem; justify-content:center; }

 <div class="getintouch"> <div> <label>Name</label><br> <input type="text" name="name" id="name"><br><br> <label>Email</label><br> <input type="email" name="email" id="email"><br><br> <label>Phone</label><br> <input type="email" name="email" id="email"> </div> <div> <textarea name="description" id="description" cols="30" rows="10"></textarea> </div> </div>

如何在 HTML 和 CSS 中對齊輸入 HTML 標簽和文本區域（聯系頁面樣式）

問題描述

2 個解決方案

解決方案1
0 已采納 2022-04-10 19:00:10

HTML：

CSS：

結果：

解決方案2
0 2022-04-10 19:06:00

如何在 HTML 和 CSS 中對齊輸入 HTML 標簽和文本區域（聯系頁面樣式）

問題描述

2 個解決方案

解決方案1 0 已采納 2022-04-10 19:00:10

HTML：

CSS：

結果：

解決方案2 0 2022-04-10 19:06:00

解決方案1
0 已采納 2022-04-10 19:00:10

解決方案2
0 2022-04-10 19:06:00