我有一个菜单，其中有5个项目作为无序列表。我可以调整填充在单台电脑，但如果屏幕大小改变，布局也改变在另一台电脑。我使用百分比，但那也是不工作的。
.menu{
opacity:70%;
}
.menu ul{
width:100%;
display:inline;
padding-top: 16px;
padding-bottom: 16px;
}
.menu ul li{
font-size: x-large;
float: left;
list-style: none;
text-decoration: none;
color:yellow;
background-color:green;
padding:10px 6%;
box-sizing:border-box;
}
我建议使用vh和vw属性。 例如，#box{padding:10vh 30vw}
在本例中，顶部和底部填充将是屏幕的1/10。 对于右和左填充将是3/10的屏幕。
我想你不可能有这样一个反应迅速的菜单。 如果它适合大屏幕，它可能无法适合小屏幕（或者你将不得不减少字体大小，但也许它将不再可读）
否则，如果您想要保留在一行中的内容，我强烈建议您使用flex定位。
您可以通过此链接了解更多关于Flex的信息。
null
.container {
display: flex;
}
.container > * {
flex: 1;
text-align: center;
}<div class="container">
<span>item 1</span>
<span>item 2</span>
<span>item 3</span>
<span>item 4</span>
<span>item 5</span>
</div>
尝试包含float属性。。
