我正在建立一個聊天網站，我試圖讓“提交訊息”按鈕在文本區域上方對齊，但我遇到了一個奇怪的問題。按鈕在其上方對齊，但是（我猜）因為 textarea 是可調整大小的，所以按鈕在某種程度上位于它的“后面”。
.center {
text-align: center;
}
#textarea {
position: fixed;
bottom: 10px;
right: 10px;
left: 10px;
}
#submit {
position: fixed;
bottom: 20px;
right: 10px;
}<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-10">
<button type="submit" id="submit">Click to send!</button>
<p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" cols="30" rows="5"></textarea></p>
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</body>在代碼片段中，盡量減少textarea；該按鈕位于其最小化狀態的正上方。我想過通過簡單地添加margin-bottom到按鈕來修復它，但我希望我的頁面能夠完全回應所有螢屏尺寸。我該如何解決這個問題？
謝謝
uj5u.com熱心網友回復：
只需重新排序您的標記，按鈕就會放在 textarea 上。無論如何，在輸入之后有按鈕在語意上更正確。
請注意，我已經調整了位置樣式以更好地適應您的布局。由于您要減小 textarea 的大小，因此您需要覆寫 Bootstrap 提供的寬度（假設您使用的是正確的表單元素類）。
提示：永遠不要告訴你的用戶點擊某個地方。我們都知道如何使用按鈕。這只是沒有必要。
.center {
text-align: center;
}
#textarea {
position: fixed;
bottom: 10px;
right: 10px;
left: 10px;
width: auto;
}
#submit {
position: fixed;
bottom: 20px;
right: 20px;
}<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-10">
<p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" rows="5" class="form-control"></textarea></p>
<button type="submit" id="submit" class="btn btn-default">Send!</button>
</div>
</div>
</div>
</body>uj5u.com熱心網友回復：
像這樣嘗試，按鈕和文本區域最終位于它們各自col-10的寬度列中。mx-auto然后將列居中。
<div class="row">
<div class="col-sm-10 mx-auto">
<button type="submit" id="submit">Click to send!</button>
</div>
<div class="col-sm-10 mx-auto">
<p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" cols="30" rows="5" ></textarea></p>
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/447919.html
上一篇：D3.js-在HTML中添加元素-<script></script>位置
下一篇：更改復選框的顏色