填充百分比不响应浏览器宽度

Question

我想在我的代码填充中提供一些li作为响应，这些填充根据浏览器的宽度而增加或减少。

我认为这就像使用padding: 0 5%一样简单，但是它不起作用，导致填充7.063px的填充，如果浏览器尺寸增加或减小，填充也不会改变。

.wrapper > * { 
  display: inline-block 
}

ul {
  list-style: none;
  padding-left: 0;
}


li {
  display: inline-block;
  padding: 0 5%;
}

<div class="wrapper">
	<h1>Hello</h1>
	<ul>
		<li>Apples</li>
		<li>Oranges</li>
		<li>Pears</li>
	</ul>
	<h1>Bye</h1>
</div>

我想念的是什么，这不是应该用百分比填充吗？如何获得响应式填充？

Answer 1

%大约是parent，而不是浏览器大小

因此请尝试使用vw：

Working code

.wrapper > * { 
  display: inline-block 
}

ul {
  list-style: none;
  padding-left: 0;
}


li {
  display: inline-block;
  padding: 0 5vw;
}

<div class="wrapper">
	<h1>Hello</h1>
	<ul>
		<li>Apples</li>
		<li>Oranges</li>
		<li>Pears</li>
	</ul>
	<h1>Bye</h1>
</div>

其他方式是将width设置为父级

See working code:

.wrapper > * { 
  display: inline-block 
}

ul {
  list-style: none;
  padding-left: 0;
  width:80%;
}


li {
  display: inline-block;
  padding: 0 5%;
}

<div class="wrapper">
	<h1>Hello</h1>
	<ul>
		<li>Apples</li>
		<li>Oranges</li>
		<li>Pears</li>
	</ul>
	<h1>Bye</h1>
</div>