我有一个按钮，当点击改变背景颜色。然而，我想按钮是在页面的中心(已使用位置相对)，然而，当我试图创建一个宽度的按钮另一个框出现了一个薄的边界。我想有一个按钮相同的大小和文本居中，无论什么文本(最多20个字符)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
top{
display: flex;
justify-content: space-around;
border: black 1px solid;
background-color: chartreuse;
}
.main{
text-align: center;
margin-top: 15%;
border: black 1px solid;
display: inline-block;
position: relative;
left: 40%;
}
button{
cursor: pointer;
}
#btn {
font-size: 2em;
font-weight: bold;
padding: 1em;
}
</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colour Flipper</title>
<link rel="stylesheet" href="colourflipper.css">
</head>
<body>
<div class="top">
<ul>Colour Flipper</ul>
<ul>Simple</ul>
<ul>Hex</ul>
</div>
<div class="main">
<button id="btn" onclick="myFunction();myyFunction()">
Background Colour
</button>
</div>
<script src="colourflipper.js"></script>
</body>
<script>
const colors = ["blue", "green", "yellow"];
let colorIndex = -1;
function myFunction(){
colorIndex += 1;
if (colorIndex > colors.length-1) colorIndex = 0;
document.body.style.backgroundColor = colors[colorIndex]
}
let colorSindex = -1;
function myyFunction(){
colorSindex +=1;
if (colorSindex > colors.length-1) colorSindex = 0;
document.querySelector('#btn').innerHTML = colors[colorSindex]
}
</script>
</html>试着考虑一下这个
可能对你有帮助
<!DOCTYPE html>
<html lang="en">
<head>
<style>
top{
display: flex;
justify-content: space-around;
border: black 1px solid;
background-color: chartreuse;
}
.main{
text-align: center;
margin-top: 15%;
border: black 1px solid;
display: inline-block;
position: relative;
left: 40%;
}
button{
cursor: pointer;
}
#btn {
font-size: 2em;
font-weight: bold;
padding: 1em;
position: fixed;
width: 20%;
height: 20%;
}
</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colour Flipper</title>
<link rel="stylesheet" href="colourflipper.css">
</head>
<body>
<div class="top">
<ul>Colour Flipper</ul>
<ul>Simple</ul>
<ul>Hex</ul>
</div>
<div class="main">
<button id="btn" onclick="myFunction();myyFunction()">
Background Colour
</button>
</div>
<script src="colourflipper.js"></script>
</body>
<script>
const colors = ["blue", "green", "yellow"];
let colorIndex = -1;
function myFunction(){
colorIndex += 1;
if (colorIndex > colors.length-1) colorIndex = 0;
document.body.style.backgroundColor = colors[colorIndex]
}
let colorSindex = -1;
function myyFunction(){
colorSindex +=1;
if (colorSindex > colors.length-1) colorSindex = 0;
document.querySelector('#btn').innerHTML = colors[colorSindex]
}
</script>
</html>我可以检查，你已经应用了一个边框。main而不是#btn，这就是为什么你看到一个框周围的按钮。
我把。main设为block元素，这样它就覆盖了整个宽度，并给button元素一个固定的30%的宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
top{
display: flex;
justify-content: space-around;
border: black 2px solid;
background-color: chartreuse;
}
.main{
text-align: center;
margin-top: 15%;
display: block; /* made it block to cover the whole width */
position: relative;
/* removed the border from here due to which you were seeing another box */
}
button{
cursor: pointer;
}
#btn {
margin: auto;
font-size: 2em;
font-weight: bold;
padding: 1em;
width: 30%; /* gave the button a fix width */
border: black 1px solid;
}
</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colour Flipper</title>
<link rel="stylesheet" href="colourflipper.css">
</head>
<body>
<div class="top">
<ul>Colour Flipper</ul>
<ul>Simple</ul>
<ul>Hex</ul>
</div>
<div class="main">
<button id="btn" onclick="myFunction();myyFunction()">
Background Colour
</button>
</div>
<script src="colourflipper.js"></script>
</body>
<script>
const colors = ["blue", "green", "yellow"];
let colorIndex = -1;
function myFunction(){
colorIndex += 1;
if (colorIndex > colors.length-1) colorIndex = 0;
document.body.style.backgroundColor = colors[colorIndex]
}
let colorSindex = -1;
function myyFunction(){
colorSindex +=1;
if (colorSindex > colors.length-1) colorSindex = 0;
document.querySelector('#btn').innerHTML = colors[colorSindex]
}
</script>
</html>
我省略了display:inline-block，因此.main取全宽度:
我还移动了border: black 1px solid;
，所以它现在属于#btn。
我也给#btn一个固定的宽度。
.main{
text-align: center;
margin-top: 15%;
position: relative;
}
button{
cursor: pointer;
}
#btn {
font-size: 2em;
font-weight: bold;
padding: 1em;
border: black 1px solid;
width:30%;
}
我可以这样做:
const colours = ['red', 'green', 'blue']
let colorIndex = -1;
function myFunction(){
colorIndex += 1;
if (colorIndex > colours.length -1) colorIndex = 0;
document.getElementById("btn").innerHTML = colours[colorIndex]
document.getElementById("btn").style.width="9%";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="colourflipper.css">
</head>
<body>
<button id="btn" onclick="myFunction();myyFunction()">Background Colour</button>
</body>
<script src="colourflipper.js"></script>
</html>
button{
position: relative;
margin-top: 15%;
margin-left: 48%;
cursor: pointer;
}