我正在學習 html 并且我嘗試創建非常簡單的登錄頁面，
因為我同時使用 php 我稍后使用表單呼叫 php
但后來我創建了表單，但是那里的一些輸入將它們顯示
在一行中而不是一行中別人的頂部
代碼：
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>CAW - Logowanie</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="login_form" method="post">
<input type="text" name="login" placeholder="E-Mail" style="margin: 5px 5px 5px 5px;"/>
<input type="password" name="passwd" placeholder="Has?o" style="margin: 5px 5px 5px 5px;"/>
<input type="submit" value="Zalogój si?"/>
<form>
</body>
</html>
它的樣子：
我的期望：
uj5u.com熱心網友回復：
有幾種方法可以獲得您正在尋找的結果。我在下面列出了一些更常見的：
方法一：顯示網格
就像我之前許多人所說的，應用display的grid的form元素會導致事物中的form默認要顯示在列的順序。然而，這確實有一個不幸的結果，即把所有東西都拉伸到表單的整個寬度。
.form-grid {
display: grid;
}
.form-grid input {
margin: 5px;
}<!-- Display Grid -->
<form id="login_form" method="post" class="form-grid">
<input type="text" name="login" placeholder="E-Mail"/>
<input type="password" name="passwd" placeholder="Has?o"/>
<input type="submit" value="Zalogój si?"/>
<form>如果元素拉伸到全寬不是你想要的東西，但你仍然想使用display: grid;，你可以在表單中使用額外的內容框來防止這些東西被拉伸：
.form-grid {
display: grid;
}
.form-grid input {
margin: 5px;
}<!-- Display Grid with Inner Boxes -->
<form id="login_form" method="post" class="form-grid">
<div>
<input type="text" name="login" placeholder="E-Mail"/>
</div>
<div>
<input type="password" name="passwd" placeholder="Has?o"/>
</div>
<div>
<input type="submit" value="Zalogój si?"/>
</div>
<form>這會導致更接近您提供的螢屏截圖。
方法 2：顯示 Flex Flex Flow 列
您可以使用的第二種方法是display: flex;將flex-flow屬性設定為column。這需要靈活性display: flex并垂直對齊其中的元素：
.form-flex {
display: flex;
flex-flow: column;
/* additionally you can add this to keep the full width issue from happening */
align-items: start;
}
.form-flex input {
margin: 5px;
}<!-- Display Flex Column -->
<form id="login_form" method="post" class="form-flex">
<input type="text" name="login" placeholder="E-Mail"/>
<input type="password" name="passwd" placeholder="Has?o"/>
<input type="submit" value="Zalogój si?"/>
<form>方法 3：顯示模塊輸入
您可以使用的第三種方法是為表單中的每個輸入提供一個display: block屬性：
.form-block-inputs input {
display: block;
margin: 5px;
}<!-- Display Block Inputs -->
<form id="login_form" method="post" class="form-block-inputs">
<input type="text" name="login" placeholder="E-Mail"/>
<input type="password" name="passwd" placeholder="Has?o"/>
<input type="submit" value="Zalogój si?"/>
<form>方法 4：壞方法
您在技術上可以使用的最后一種方法（盡管我強烈建議您不要使用）是在每個輸入（帶有<br>標簽）之后添加一個換行符。雖然這在技術上確實實作了您要尋找的結果，但如果您需要進一步擴展此表單或在其他螢屏尺寸上顯示它，則它很笨拙并且可能會導致問題。
#login_form input {
margin: 5px;
}<!-- The Bad One -->
<form id="login_form" method="post">
<input type="text" name="login" placeholder="E-Mail"/>
<br>
<input type="password" name="passwd" placeholder="Has?o"/>
<br>
<input type="submit" value="Zalogój si?"/>
<form>希望這是有幫助的。如果您需要進一步澄清其中任何一個，請告訴我！
uj5u.com熱心網友回復：
我display: grid;在父元素中使用（在這種情況下<form>）
并且自動會像你想要的那樣
<form style="display: grid;" id="login_form" method="post">
<input type="text" name="login" placeholder="E-Mail" style="margin: 5px 5px 5px 5px;" />
<input type="password" name="passwd" placeholder="Has?o" style="margin: 5px 5px 5px 5px;" />
<input type="submit" value="Zalogój si?" />
</form>uj5u.com熱心網友回復：
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>CAW - Logowanie</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="login_form" method="post">
<input type="text" name="login" placeholder="E-Mail" style="margin: 5px 5px 5px 5px;"/><br>
<input type="password" name="passwd" placeholder="Has?o" style="margin: 5px 5px 5px 5px;"/><br>
<input type="submit" value="Zalogój si?" style="margin: 5px 0 0 5px"/>
<form>
</body>
</html>uj5u.com熱心網友回復：
您需要做的只是將輸入和按鈕分別包裝在一個標簽內，并提供空白 tp div，而不是輸入元素。
檢查以下代碼
<form id="login_form" method="post">
<div style="margin-bottom: 10px;"><input type="text" name="login" placeholder="E-Mail"/></div>
<div style="margin-bottom: 10px;"><input type="password" name="passwd" placeholder="Has?o"/></div>
<div><input type="submit" value="Zalogój si?"/></div>
<form>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403293.html
標籤：
上一篇：MutationObserver：`oldValue`格式的新值
下一篇：打開全屏選單時阻止用戶滾動