固定在顶部栏上的CSS必须保持在左侧

我目前正在我的网站上完成一些事情，但是我注意到了一个问题。 我有一个顶栏菜单，它的位置是固定的

正文和两个标题的最小宽度为1150，以防止布局出现错误（主要是因为管理部分）

但是，似乎固定的位置不仅是确保它会粘到顶部，而且还会粘到左侧

是否有任何方法可以使工具栏保持在顶部，而不是左侧，这样它仍然可以从左向右滚动，以确保我可以看到其他菜单项

现场预览：

只需调整窗口大小，请注意，当您向右滑动时，菜单也将移动，而不是停留在左侧

亲切的问候，
拉尔西1

---

<>我更喜欢一个CSS唯一的解决方案，我知道如何用jQuery来修复它，但是我认为它很讨厌。

---

要预览代码，请执行以下操作：

HTML:

<div id="container">
    <div id="header">
    <img src="http://www.evesaints.com/images/header.png" alt="EVE Probing Tracker" title="EVE Probing Tracker">
    <ul id="menu">
        <li><a href="http://www.evesaints.com/overview/">Overview</a></li>
        <li><a href="http://www.evesaints.com/news/">News</a></li>
        <li><a href="http://www.evesaints.com/how_to_play/">How to play?</a></li>
        <li><a href="http://www.evesaints.com/contact/">Contact</a></li>
    </ul>
    <a href="http://www.ignitecoding.com">
        <img src="http://www.evesaints.com/images/ignite_header.png" alt="IgniteCoding" title="IgniteCoding">
    </a>
    <ul id="menuAccount">
        <li id="topBarIskContainer"><a href="#"><span id="topBarIskBalance">CURRENT BALANCE</span><br>57,515,000 ISK</a></li>
        <li><a href="http://www.evesaints.com/dashboard/">Dashboard</a></li>
        <li><a href="http://www.evesaints.com/logout/">Logout</a></li>
    </ul>
</div>

---

您需要从

标题中删除
宽度100%
，并将
左侧
和
右侧
添加为
0
，然后使
边距：0自动

#header {
background: #fff;
height: 50px;
border-bottom: 3px solid #ff6633;
margin-bottom: 20px;
position: fixed;
top: 0px;
left: 0px;
right: 0;
width: auto;
min-width: 1150px;
z-index: 9999;
margin: 0 auto;
display: inline-block;
}

在底部的CSS文件中编写媒体查询

@media screen and (max-width: 700px) {
   #header {
     position: absolute;
   }
}

这样，当屏幕调整大小时，它保持不变。
将“最大宽度”更改为所需的值。
但它可能不会停留在顶部
css…html…有什么可供我们参考的吗？？？这就是我添加实时预览的原因@larssy1即使包含实时预览，也会在问题中发布代码。@leemo啊，好吧，我们认为只包含webpreview更好，因为它会给出一个完整的图像。我会将它粘贴到JSFIDLE中，但不会改变布局上的任何内容。我认为没有JQUERY是不可能的，只是好奇，但是如果页眉是100%宽度，为什么要使用
margin:0 auto
？更奇怪的是，为什么要在带有
display:inline block
的元素上使用它？您测试过这个吗？？在Google Chrome浏览器中更改和添加新行时，我看不到任何更改。、、在JSFIDLE中不起作用。请尝试在Google Chrome浏览器->检查元素中更改站点上的css
@media screen and (max-width: 700px) {
   #header {
     position: absolute;
   }
}