Question

我尝试使用

position:fixed;
width:10in;

但是在调整浏览器大小时，内容会超出边界（无法访问这些元素）。

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

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

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

点击此处 - http://jsfiddle.net/dF4Bx/1/

用简单的语言 -

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

Answer 1

使用CSS

让你的顶栏变得粘稠

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

Answer 2

尝试使用以下CSS，

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

8In是一个如此巨大的价值，而且固定宽度这就是为什么它不断超越浏览器。使用%值进行响应式设计。

所以改变这样的宽度

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

然后关于保持元素内联，

在margin-left:20%中使用24In代替padding:24px 20px 24px 2in!important;。

即使它到达有限的浏览器窗口时也会破坏它。您可以通过避免代码中较大的填充和宽度固定值来缩小此范围。

检查小提琴：FIddle

Answer 3

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

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

Answer 4

我知道你的问题是什么。

使用此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>

将此规则放入CSS：

#header ul li {
    margin-right: 7px;
}

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

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

请注意，我删除了搜索元素的内联样式填充。

固定位置导航栏更换

4 个答案: