从<p>标签

Question

我有五个<p>标签，如下所示：

<p align="center" class="menu">Home</p>
<p align="center" class="menu">Store</p>
<p align="center" class="menu">Composition</p>
<p align="center" class="menu">Feedback</p>
<p align="center" class="menu">Contacts</p>

使用这样的一些css代码：

.menu { 
 font-size: 18px;
 font-family: roboto;
 margin-top: 0;
 margin-bottom: 0;
 display: inline-block;
 background:white;
 padding-top: 20px;
 padding-bottom: 20px;
 width: 200px;
 position: relative;
 font-weight: bold;
 }

问题是，当我调整浏览器窗口的大小或打开手机上的页面时，<p>标签适合页面。如何将它们固定到页面上以使它们不适合？

EDIT
窗口完全展开时：

当我调整窗口大小时：

Answer 1

使用 max-width 而不是宽度：200px。

然后你可以更好地调整填充（注意：我喜欢ems）：

image

Answer 2

如果您只想让p适合窗口，请使用width: 20%代替width: 200px。这将使每个项目占据窗口长度的五分之一。

Answer 3

 .menu { 
     font-size: 1em;
     font-family: roboto;
     margin-top: 0;
     margin-bottom: 0;
     display: inline-block;
     background:white;
     max-width: 200px;
     position: relative;
     font-weight: bold;
     padding: 1em .6em
     }

如果您想修复position:fixed; 代码

的位置