当我缩小窗口大小时，HTML 文本位置不在同一位置

Question

当我缩小浏览器的窗口时，文本聚集在一起，而且全乱了。 有什么代码可以用来防止这种情况发生吗？无论窗口大小如何，我都希望它们保持在自己的位置。

.fixedmenu {
    overflow: hidden;
    background-color:rgb(153,0,51);
    position: fixed; 
    top: 0; 
    width: 100%; 
    font-size:2em;
    left:0;
    position:relative;
    font-family:"Courier New", Courier, monospace;    
}

<div class="fixedmenu">

<div style="float: left;color:white;padding:0.5% 0% 0.5% 3%;">
    || YggDrasil ||
</div>

<div style="float: right;color:white;padding:0.5% 3% 0.5% 0%;">
    || Login ||
</div>

<div style="margin:0 auto; width:30%;color:white;padding:0.5% 0% 0.5% 0%;">
    Welcome to the page of leading to fashion. 
</div>

</div>

I don't want it to look like this

Answer 1

在这种情况下防止缩小的最简单方法是给 .fixedMenu 一个固定的大小(不是百分比)。通常，如果父元素调整大小，则以百分比给出的任何规则都会缩小，例如您在内联样式中设置的填充和 30% 的宽度。最后一件事，您将 position 属性设置了两次，导致覆盖。最快的解决方法是:

.fixedmenu {
    overflow: hidden;
    background-color:rgb(153,0,51);
    position: fixed; 
    top: 0; 
    width: 1200px; 
    font-size:2em;
    left:0;
    font-family:"Courier New", Courier, monospace;    
}

但我认为最好的方法是设置一些媒体查询，以便更好地应对窗口大小的变化。