Question

我的页面顶部有一个固定的div菜单栏，当屏幕调整大小时，菜单栏不能水平滚动。

我尝试过使用溢出设置，但这会在菜单栏下创建一个单独的滚动条。

我需要将菜单栏固定在页面顶部。

HTML：

<div style="position:fixed; width:100%; top:0;" id="menu-bar">
<table width="100%" border="0" cellpadding="4" cellspacing="4" bgcolor="#FFFFFF" height="70" align="center">
    <tr>
        <td align="center" valign="middle">
            <table width="990" border="0" cellpadding="4" cellspacing="4" bgcolor="#FFFFFF">
                <tr>
                    <td width="400" valign="middle" align="left"><img src="images/logo.png" height="45" border="0" /></td>
                    <td width="50" valign="middle" align="left"></td>
                    <td class="menubox"><a href="#topofpage" class="topmenutext">Home</a></td>
                    <td class="menubox"><a href="#about" class="topmenutext">About</a></td>
                    <td class="menubox"><a href="#prices" class="topmenutext">Prices</a></td>  
                    <td class="menubox"><a href="#demo" class="topmenutext">Demo</a></td>
                    <td class="menubox"><a href="#contact" class="topmenutext">Contact</a></td>
                    <td class="menubox"><a href="#signup" class="topmenutext">Sign Up</a></td>
                    <td class="menubox"><a href="#login" class="topmenutext">Log In</a></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</div>

JSFIDDLE

任何建议都非常感谢。

由于

Answer 1

您是否考虑过使用Bootstrap创建固定的导航栏？它使导航栏保持在页面顶部，并通过创建下拉列表来处理由于屏幕重新调整大小（对于像手机这样的较小屏幕）的更改。它看起来像这样：http://getbootstrap.com/examples/navbar-fixed-top/

这是一个非常好的教程，可以帮助您入门： https://bootstrapbay.com/blog/bootstrap-tutorial-navbar/

要获取Bootstrap，我建议您在头标记之间添加此页面的CDN代码：http://getbootstrap.com/getting-started/

定位固定div不水平滚动

1 个答案: