缩小窗口大小时，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> 

我不希望它看起来像这样

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

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

Answer 2

 .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="position:absolute;right:0px;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>