浏览器调整大小时文本移动

Question

因此，当我调整浏览器的大小时，文本会在标题中移动，我怎样才能将其固定在当前位置并且在浏览器调整大小时不移动？

非常感谢，我非常感谢大家的帮助！

这是JSFiddle。

正常

调整大小

HTML：

<div id="NewNavBar"><ul class="nav">
            <li><a href="me" style="margin-left:10px;"><b>Home</b></a></li>
            <li><a href="community">Community</a></li>
            <li><a href="staff">Staff</a></li>
            <li><a href="shop">Shop</a></li>
        </ul></div>
        </div>

        <div id="NewNavB"><ul class="navb">
        <li><a href="me" style="margin-left:10px;"><b>{username}</b></a></li>
            <li><a href="#">My Page</a></li>
            <li><a href="account">Account Settings</a></li>
            </ul>   
        </div>

CSS：

#NewNavBar {
text-align: center;
position:relative;
width:100%;
min-height:40px;
border-top:2px solid #3f82a3;
border-bottom:2px solid #3977af;
background-color:#529ce2;
line-height: 40px;
}

li {
    vertical-align: middle;
    display: inline-block;
}

#NewNavBar li + li::before {
    content: " | ";
}

#NewNavB li + li::before {
    content: " | ";
}

li a{
padding:8px;
    }

    #NewNavBar ul a:hover{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #3f82a3;
    padding: 7px;
    text-decoration: none;
    background-color: #4683bc;
}

ul {

    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav {
    float: left;
    color: white;
    margin-left:202px;
}

.navb {
    float: left;
    color: #53729c;
    margin-left:202px;
}

#NewNavB {
margin: 0 auto;
position:relative;
margin-bottom:15px;
width: 100%;
min-height: 30px;
border-bottom:2px solid #c1c1c1;
background-color:#f9f9f9;
line-height: 32px;
}

Answer 1

您可以通过在margin-left或.nav方面指定两个.navb和%的{​​{1}}来获得您想要的内容（当用户缩放时，这两者都比vw更好。）请参阅this jsFiddle，并参阅here the full screen result。

px

但是，如果用户放大了，它将破坏你的布局。如果您愿意，可以使用.nav { float: left; color: white; margin-left:25vw; } .navb { float: left; color: #53729c; margin-left:25vw; } s（em，例如）指定媒体查询 - 如果操作正确，可以在用户缩放时改善布局并使您的网站更具响应性在移动屏幕上。 jsFiddle和前：

max-width: 30em

Answer 2

只需将#NewNavBar的宽度放在px中，而不是百分比。