我想删除按钮之间的空格,以便当我将鼠标悬停在NORMAL按钮上时,它与HARD按钮之间不会有空格.我该怎么做？这些空白区域来自哪里？
- body {
- margin: 0;
- }
- #stripe {
- background-color: white;
- text-align: center;
- height: 50px;
- color: black;
- }
- button {
- border: none;
- background: none;
- text-transform: uppercase;
- height: 100%;
- font-weight: 700;
- color: black;
- letter-spacing: 1px;
- font-size: inherit;
- transition: all 0.3s;
- outline: none;
- }
- button:hover {
- color: white;
- background: black;
- }
- .selected {
- color: white;
- background: black;
- }
- <div id="stripe">
- <button class="mode">Easy</button>
- <button class="mode">Normal</button>
- <button class="mode selected">Hard</button>
- </div>
解决方法
删除空格和回车符,或在它们之间放置HTML注释.
- body {
- margin: 0;
- }
- #stripe {
- background-color: white;
- text-align: center;
- height: 50px;
- color: black;
- }
- button {
- border: none;
- background: none;
- text-transform: uppercase;
- height: 100%;
- font-weight: 700;
- color: black;
- letter-spacing: 1px;
- font-size: inherit;
- transition: all 0.3s;
- outline: none;
- }
- button:hover {
- color: white;
- background: black;
- }
- .selected {
- color: white;
- background: black;
- }
- <div id="stripe">
- <button class="mode">Easy</button><!--
- --><button class="mode">Normal</button><!--
- --><button class="mode selected">Hard</button>
- </div>
