如何设置处理窗口大小调整的宽度填充

Question

我有一个菜单，它有5个项目作为无序列表。我可以在一台电脑中调整填充，但如果屏幕大小发生变化，另一台电脑的布局也会发生变化。我使用了百分比，但这也不起作用。

.menu{
opacity:70%;
}
.menu ul{
width:100%;
display:inline;

}
.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;
}

Answer 1

我建议使用vh和vw属性。例如#box { padding: 10vh 30vw}

在这个例子中，顶部和底部填充将是屏幕的1/10。对于右边和左边的填充将是屏幕的3/10。

Answer 2

我认为你不可能有一个这样响应的菜单。如果它适合大屏幕，它可能无法适应较小的屏幕(或者你必须缩小字体大小，但可能它将不再可读(

否则，如果您想要保持在一行中的内容，我强烈建议您使用flex定位。

您可以通过此链接了解有关Flex的更多信息。

.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>

Answer 3

尝试包含float属性。。