表示翻转相反的按钮应该位于文本框下方，如图所示。正确的按钮放置
这就是我的代码的样子。
我希望将按钮移动到与所有文本框内联的位置，而不是当前的位置。如果有人也知道如何让文本显示标签正确显示，那就太好了！
这是我正在处理的页面的链接。 页
<!doctype HTML>
<html>
<head>
<style>
.labelsec{
display: inline-block;
font-weight: bold;
text-align: right;
width: 300px;
}
.boxsec{
display: inline-block;
}
</style>
<script>
function putstuff(){
var toput=TextToDisplay.value.split(" ");
var x=0;
puthere.innerHTML="";
for (x=0; x<toput.length;x++)
puthere.innerHTML+=toput[x]+"<br />";
}
</script>
</head>
<body>
<form>
<div class="labelsec">
<label for="TextToDisplay">Text To Display:</label>
</div>
<div class="boxsec">
<textarea id="TextToDisplay" name="TextToDisplay" onkeyup="putstuff();">
</textarea>
</div><br />
<div class="labelsec">
<label for="FontColor">Font Color:</label>
</div>
<div class="boxsec">
<input type="text" id="FontColor" name="FontColor">
</div><br />
<div class="labelsec">
<label for="BackgroundColor">Background Color:</label>
</div>
<div class="boxsec">
<input type="text" id="BackgroundColor" name="BackgroundColor">
</div><br />
<div class="boxsec">
<button type="button" id="flip" name="flip" disabled>Flip Opposite</button>
</div>
</form>
<hr />
<span id="puthere">
</span>
</body>
</html>
我尝试对
HTMLCSSJavaScript<html>
<head>
<title>Flip text</title>
<style>
#textFlipForm {
display: flex;
flex-direction: column;
gap: 5px;
width: 310px;
}
.input-container {
display: flex;
justify-content: space-between;
gap: 5px;
}
.label {
font-weight: bold;
text-align: end;
width: 100%;
}
.input {
width: 100%;
}
#flipButton {
align-self: center;
margin-left: 95px;
}
</style>
</head>
<body>
<form id="textFlipForm">
<div class="input-container">
<label for="textToDisplay" class="label">Text To Display:</label>
<textarea id="textToDisplay" class="input" name="textToDisplay" rows="5" onkeyup="putStuff();"></textarea>
</div>
<div class="input-container">
<label for="fontColor" class="label">Font Color:</label>
<input type="text" id="fontColor" class="input" name="fontColor" />
</div>
<div class="input-container">
<label for="backgroundColor" class="label">Background Color:</label>
<input type="text" id="backgroundColor" class="input" name="backgroundColor" />
</div>
<button type="button" id="flipButton" name="flip" disabled>
Flip Opposite
</button>
</form>
<hr />
<span id="putHere"> </span>
<script>
function putStuff() {
var toPut = textToDisplay.value.split(" ");
var x = 0;
putHere.innerHTML = "";
for (x = 0; x < toPut.length; x++)
putHere.innerHTML += toPut[x] + "<br />";
}
</script>
</body>
</html>
阅读此处命名变量的最佳实践。