在代码中,可以通过设置固定的宽度值来避免按钮的宽度与弹出窗口的宽度成比例。
以下是一个使用HTML和CSS的示例代码:
HTML代码:
这是一个弹出窗口
CSS代码:
.my-button {
width: 150px; /* 设置按钮的固定宽度 */
height: 50px;
background-color: #ccc;
border: none;
cursor: pointer;
}
.popup {
width: 300px; /* 设置弹出窗口的宽度 */
height: 200px;
background-color: #f1f1f1;
border: 1px solid #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.popup p {
text-align: center;
padding-top: 80px;
}
JavaScript代码:
const button = document.querySelector('.my-button');
const popup = document.querySelector('.popup');
button.addEventListener('click', () => {
popup.style.display = 'block';
});
在上面的代码中,按钮的宽度被设置为150px,而弹出窗口的宽度被设置为300px。这样,无论弹出窗口的大小如何改变,按钮的宽度都会保持不变。
上一篇:不要设置图标