Html 固定位置导航杆更换

我试着使用

position:fixed;
width:10in;

但当调整浏览器大小时，内容会超出边界（无法到达这些元素）

我需要一个替代方案，因为我希望导航条始终处于顶部

编辑：我还希望内容是内联的，而不是使用

width:100%;
display:inline or inline-block

检查这里-

用简单的语言-

如果宽度没有被调整大小的窗口填满，我需要浏览器提供一个水平条。

试试下面的CSS

position:fixed;
top:0;
width:100%;
z-index:99;

8In

是一个非常大的值，而且它是固定宽度的，这就是为什么它不断超越浏览器。对响应性设计使用

%

值

所以像这样改变宽度

div.back div.front {
width:100%;
}

然后关于保持元素内联

在

填充：24px 20px 24px 2in！中使用类似
左边距：20%
的内容，而不是
24In
！重要的

当它到达一个有限的浏览器窗口时，甚至它也会打破界限。您可以通过在代码中避免较大的填充和宽度固定值来缩小此范围

检查Fiddle:
使用CSS使顶部的条变得粘乎乎的

#header{
   position:fixed;
   left:0px;
   top:0px;
   height:30px;
   width:100%;
   background:#999;
}

为了达到您的目的，您可以尝试以下代码：

.divClass{
  position:fixed;
  top: 0px;
  z-index: 99;
  width: 80% /*for responsible width*/
}

我知道你有什么问题

使用此HTML而不是您的HTML：

<div class="back">
        <div id="header" class="front">
            <ul>
                <li>Home</li>
                <li style="float: right;">Login</li>
                <li style="float: right;">Register</li>
                <li style="float: right;">Search: <input type="text" class="textbox" name="sr"></li>

            </ul>
        </div>
    </div>

同样，将此宽度
8in
更改为
95%
：

div.back div.front {
    background-color: #0072C6 !important;
    margin: auto;
    width: 95%;
}

注意，我删除了搜索元素的内联样式填充或你想写的
宽度：10英寸？？@VaibhavVt请在我的回答中检查更新的小提琴检查我的编辑。。。你的css不允许代码在之后内联resize@VaibhavVt你能在这里提供你的HTML吗？我已经在n之前和之后添加了导航栏的图像resize@VaibhavVt内容内联是指？？您是说在浏览器宽度减小时避免将内容包装到下一行吗？？
div.back div.front {
    background-color: #0072C6 !important;
    margin: auto;
    width: 95%;
}