主页 / 问题 / 1573819
Accepted
Aноним
Asked:2024-03-29 19:52:45 +0800 CST2024-03-29 19:52:45 +0800 CST

下午好 我有一个问题，如何消除按钮跳跃

  • 772

button {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
}

.header {
display: flex;
justify-content: center;
gap: 20px;
}

.button {
font-family: sans-serif;
text-transform: uppercase;
}

.button:hover {
border: 1px solid #000;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/fonts.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="header">
        <button class="button">привет</button>
        <button class="button">привет</button>
        <button class="button">привет</button>
        </header>
</body>
</html>

html

1 个回答

  1. Best Answer

    解决方案

    例如像这样

    button {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
}

.header {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.button {
  font-family: sans-serif;
  text-transform: uppercase;
  border: 1px solid #0000;
}

.button:hover {
  border-color: #000;
}
    <header class="header">
  <button class="button">привет</button>
  <button class="button">привет</button>
  <button class="button">привет</button>
</header>

    或者像这样

    button {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
}

.header {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.button {
  font-family: sans-serif;
  text-transform: uppercase;
}

.button:hover {
  outline: 1px solid #000;
}
    <header class="header">
  <button class="button">привет</button>
  <button class="button">привет</button>
  <button class="button">привет</button>
</header>

    • 1

相关问题