如何在HTML和CSS中缩进<textarea>标签的前四分之一？我不想缩进最上面的四分之一，只是这样文本就在我的复制按钮下面。我确实尝试使用text-indent，但不幸的是，它对我没有用。请注意，要理解我的意思，您需要扩展代码段。感谢您抽出宝贵的时间阅读本文，下面是我的代码。
function myFunction(){
var text = document.getElementById('input').value;
var textArray = text.split(" ").sort();
var output= document.getElementById('output');
output.value = textArray.toString().replace(/,/g," ");
}
function maFunction() {
var copyText = document.getElementById("output");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
}
/*
import React, { Component } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// minified version is also included
// import 'react-toastify/dist/ReactToastify.min.css';
class App extends Component {
notify = () => toast("Wow so easy !");
render(){
return (
<div>
<button onClick={this.notify}>Notify !</button>
<ToastContainer />
</div>
);
}
}
*/
/*import React, { Component } from 'react';
import { toast } from 'react-toastify';
class Example extends Component {
notify = () => {
toast("I cannot be duplicated !", {
toastId: 13
});
}
render(){
return (
<div>
<button onClick={this.notify}>Notify</button>
</div>
);
}
}*/
function fadeOut(){
location.href='index.html#open-modal';
setTimeout(function () {
location.href='index.html#modal-close';
}, 1000);
}body {
margin-top: 20px;
margin-left: 20px;
display: flex;
}
.txt {
margin-right: 20px;
background: #ffffff;
border-style: solid;
border-color: #4CAF50;
border-width: 2px;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
/*box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
margin-top: 0px;
}
.text {
border: none;
margin-top: 15px;
margin-left: 18px;
height: 660px;
width: 630px;
outline: none;
font-size: 24px;
resize: none;
}
.asci {
background: #ffffff;
border-style: solid;
border-color: #4CAF50;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
/*box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
.alpha {
margin-top: 15px;
margin-left: 10px;
height: 660px;
width: 550px;
outline: none;
font-size: 24px;
resize: none;
vertical-align: top;
border: none;
}
.button {
background: #4CAF50;
border: none;
outline: none;
color: #ffffff;
padding: 14px;
width: 100px;
border-radius: 0 10px;
margin-top: 0px;
margin-left: 0px;
font-size: 22px;
cursor: pointer;
}
::selection {
color: black;
background: lightblue;
}
.modal-window {
position: fixed;
background-color: rgba(200, 200, 200, 0.75);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal-window:target {
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 170px;
height: 50px;
position: relative;
/*margin: 10% auto;
padding: 2rem;*/
background: #444;
color: #fff;
}
.modal-window h1 {
margin-top: 15px;
font-size: 10px;
}<html>
<head>
<title>alphabetical order machine</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<form class="txt">
<textarea class="text" id="input" type="text" placeholder="type your text here" onchange="myFunction()" onkeyup="myFunction()"></textarea>
</form>
<form class="asci">
<textarea class="alpha" id="output" readonly="readonly" type="output" placeholder="your alphabetized text will appear here"></textarea>
<input class="button" type='button' value="copy" onclick="maFunction(),fadeOut()">
</form>
<div id="open-modal" class="modal-window">
<div>
<h1>text copied to clipboard</h1>
<div></div>
<script src="index.js"></script>
</body>
</html>
function myFunction(){
var text = document.getElementById('input').value;
var textArray = text.split(" ").sort();
var output= document.getElementById('output');
output.value = textArray.toString().replace(/,/g," ");
}
function maFunction() {
var copyText = document.getElementById("output");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
}
/*
import React, { Component } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// minified version is also included
// import 'react-toastify/dist/ReactToastify.min.css';
class App extends Component {
notify = () => toast("Wow so easy !");
render(){
return (
<div>
<button onClick={this.notify}>Notify !</button>
<ToastContainer />
</div>
);
}
}
*/
/*import React, { Component } from 'react';
import { toast } from 'react-toastify';
class Example extends Component {
notify = () => {
toast("I cannot be duplicated !", {
toastId: 13
});
}
render(){
return (
<div>
<button onClick={this.notify}>Notify</button>
</div>
);
}
}*/
function fadeOut(){
location.href='index.html#open-modal';
setTimeout(function () {
location.href='index.html#modal-close';
}, 1000);
}body {
margin-top: 20px;
margin-left: 20px;
display: flex;
}
.form {
display: grid;
grid-template-columns: 50% 50%;
column-gap: 10px;
row-gap: 10px;
margin-right: 20px;
background: #ffffff;
justify-items: end;
}
.form textarea {
border: none;
margin-top: 15px;
padding: 10px;
height: 660px;
width: 90%;
outline: none;
font-size: 24px;
resize: none;
border-style: solid;
border-color: #4CAF50;
border-width: 2px;
outline: none;
height: 700px;
border-radius: 10px;
margin-top: 0px;
}
.button {
background: #4CAF50;
border: none;
outline: none;
color: #ffffff;
padding: 14px;
width: 100px;
border-radius: 0 10px;
margin-top: 0px;
margin-left: 0px;
font-size: 22px;
cursor: pointer;
}
::selection {
color: black;
background: lightblue;
}
.modal-window {
position: fixed;
background-color: rgba(200, 200, 200, 0.75);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal-window:target {
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 170px;
height: 50px;
position: relative;
/*margin: 10% auto;
padding: 2rem;*/
background: #444;
color: #fff;
}
.modal-window h1 {
margin-top: 15px;
font-size: 10px;
}<html>
<head>
<title>alphabetical order machine</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<form class="form">
<textarea class="text" id="input" type="text" placeholder="type your text here" onchange="myFunction()" onkeyup="myFunction()"></textarea>
<textarea class="alpha" id="output" readonly="readonly" type="output" placeholder="your alphabetized text will appear here"></textarea>
<div></div>
<input class="button" type='button' value="copy" onclick="maFunction(),fadeOut()">
</form>
<div id="open-modal" class="modal-window">
<div>
<h1>text copied to clipboard</h1>
<div></div>
<script src="index.js"></script>
</body>
</html>