我打算有一個長輸入表單居中。之后，我需要在表單右端后 15px 處放置一個提交按鈕。你能幫我編碼嗎？謝謝你。
注意：我只想讓表單居中，然后添加一個按鈕。
我的嘗試：
<div style="background-color: red; width: 100%; ">
<form action="file.php">
<center><input type="text" name="c2" style="width: 79%; font-size:25pt;"></center>
<input type="submit" value="send" style="position: relative; left: 15px">
</form>
</div>添加照片：
uj5u.com熱心網友回復：
Flexbox 將是幾種可能性之一。
.wrapper {
display:flex;
align-items: center;
justify-content: center;
}
.inp {
width: 79%;
font-size:25pt;
}<div style="background-color: red; width: 100%; ">
<form action="file.php">
<div class="wrapper">
<input type="text" name="c2" class="inp">
<br/>
<input type="submit" value="send" style="position: relative; left: 15px">
</div>
</form>
</div>更新（再次）
.main { display: flex; }
.a, .b, .c { background: red; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
.inp {
width: 79%;
font-size:25pt;
}
.sub {
position: relative;
right: 15px;
top:10px;
}<div class="main">
<div class="a"></div>
<div class="b">
<form action="file.php">
<div class="wrapper">
<input type="text" name="c2" class="inp">
</div>
</form>
</div>
<div class="c">
<input type="submit" value="send" class="sub">
</div>
</div>更新 (2)
.wrapper {
display:flex;
align-items: center;
justify-content: center;
}
.inp {
width: 79%;
font-size:25pt;
position: relative; left: 15px
}
.sub {
position: relative; left: 30px
}<div style="background-color: red; width: 100%; ">
<form action="file.php">
<div class="wrapper">
<input type="text" name="c2" class="inp">
<br/>
<input type="submit" value="send" class="sub">
</div>
</form>
</div>uj5u.com熱心網友回復：
你可以使用 flexbox 做這樣的事情。 https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
.form-container {
background-color: red;
width: 100%;
display:flex;
flex-flow: row nowrap;
justify-content:center;
padding: 10px 0;
}<form action="file.php">
<div class="form-container">
<input type="text" name="c2" style="width: 79%; font-size:25pt;">
<input type="submit" value="send" style="position: relative; left: 15px">
</div>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/365501.html
上一篇：型別錯誤：null不是物件（正在評估“document.getElementById(actieveLijst).style”）
下一篇：靜態大小的HTMLGif