css - 填充强制 block 元素换行

Question

HTML代码:

<h1><a href="#">Hello World! Hello World!</a></h1>

CSS 代码:

* {
 box-sizing: border-box; 
}

body {
 text-align: center;
}

h1 {
  display: inline-block;  /*For some known reasons*/
  color: white;
  background-color: gray;
}

h1 a {
  display: block;
  padding: 2%; /*Here is the problem, btw if i apply padding only to the sides (right and left) the phrase stay in one line ???*/
  text-decoration: none;
  color: inherit;
}

Preview

1. 我不想删除通用选择器*规则
2. 我不想将 H1 显示更改为内嵌
3. 我不想使用空格:nowrap;

那么我怎样才能将短语保持在一行中呢？

Answer 1

对此感到抱歉，但我真的很生气，我浪费了这么多时间，最后问题出在使用百分比“%”上，我需要做的就是使用 em 或 rem 或 px，pfff 为什么会这样？