我在文本框的左上角有一个文本框和一些按钮.我希望这些按钮直接位于文本框的顶部，而不是文本框的左上角.有没有办法做到这一点.我试着调整-Content:Center，但不起作用. 我正在try 制作一个类似谷歌文档的应用程序，所以我需要像谷歌文档一样的按钮在文本框上.
var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var highlightBtn = document.querySelector("#highlight");
boldBtn.addEventListener("click", function () {
boldBtn.classList.toggle("inUse");
});
italicBtn.addEventListener("click", function () {
italicBtn.classList.toggle("inUse");
});
underlineBtn.addEventListener("click", function () {
underlineBtn.classList.toggle("inUse");
});
highlightBtn.addEventListener("click", function () {
highlightBtn.classList.toggle("inUse");
});
const changeColorText = (color) => {
document.execCommand("styleWithCSS", false, true);
document.execCommand("foreColor", false, color);
};
document
.getElementById("highlight")
.addEventListener("click", function () {
var range = window.getSelection().getRangeAt(0),
span = document.createElement("span");
span.className = "highlight";
span.appendChild(range.extractContents());
range.insertNode(span);
});body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
background-color: lightgrey;
}
.userInput {
margin: 1px;
padding: 1px;
width: 1000px;
height: 700px;
resize: none;
font-family: "Segoe UI", sans-serif;
display: block;
margin-left: auto;
margin-right: auto;
background-color: white;
}
.inUse {
background-color: lightblue;
width: default;
height: default;
border-width: thin;
}
button {
width: 100px;
}
.dropbtn {
/* background-color: #3498db; */
color: black;
/* padding: 16px; */
/* font-size: 16px; */
border: none;
cursor: pointer;
width: 100px;
height: 30px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
.highlight {
background-color: yellow;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Editor</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<button class="bold" onclick="document.execCommand('bold',false,null);">
????
</button>
<button class="italic" onclick="document.execCommand('italic',false,null);">
????
</button>
<button
class="underline"
onclick="document.execCommand('underline',false,null);"
>
U̲
</button>
<input
type="color"
class="color-picker"
id="colorPicker"
oninput="changeColorText(this.value);"
/>
<label>Select color</label>
<button id="highlight"><mark>Highlight</mark></button>
<fieldset class="userInput" contenteditable="true"></fieldset>
</body>
</html>