HTML/CSS/JS实现文本不超20字符时固定宽度且居中的按钮

修复方案 #

核心修改点 #

• 修正类选择器书写错误：原代码中top选择器漏掉了类名前缀.，改为.top才能正确匹配顶部导航容器
• 移除.main上多余的border属性：你看到的额外带细边框的盒子就是这个.main容器的边框，它默认跟随子元素按钮尺寸变化，按钮改宽度时它也会跟着撑开显露出边框
• 给按钮设置固定宽高+内容居中：直接给#btn设置固定的宽高值，搭配flex布局实现文字无论长短都居中，同时可配置溢出规则避免超出20字符的内容打乱布局
• 优化按钮居中逻辑：把原来的相对定位偏移改为更稳定的水平居中方式，避免不同屏幕尺寸下偏移不准的问题

修改后完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 修复类选择器漏写.的问题 */
.top{
    display: flex;
    justify-content: space-around;
    border: black 1px solid;
    background-color: chartreuse;
    margin: 0;
    padding: 1em 0;
}
.main{
    text-align: center;
    margin-top: 15%;
    /* 移除多余的border，就是你说的额外细边框盒子的来源 */
    /* border: black 1px solid; */
    /* 优化居中方式，不需要相对定位偏移 */
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
button{
  cursor: pointer;
  /* 清除按钮默认边框，避免自带的边框样式干扰，需要边框可自行加指定样式 */
  border: none;
  border-radius: 4px;
}
#btn {
    font-size: 2em;
    font-weight: bold;
    /* 移除padding撑大小的方式，改为固定宽高，适配最多20字符的需求 */
    /* padding: 1em; */
    width: 12em;
    height: 3.5em;
    /* 文字居中配置 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 可选：超出20字符时显示省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</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>
</head>
<body>
    <div class="top">
        <span>Colour Flipper</span>
        <span>Simple</span>
        <span>Hex</span>
    </div>
    <div class="main">
        <button id="btn" onclick="myFunction();myyFunction()">
        Background Colour
    </button>
    </div>
<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>
</body>
</html>

补充说明 #

按钮的宽高值可以根据自身需求调整，当前设置的12em宽度足够容纳20个2em大小的字符。如果需要保留按钮边框，直接给#btn加border: 1px solid #000属性即可，边框会跟随按钮固定尺寸，不会出现额外外框。

内容的提问来源于stack exchange，提问作者goosey9