2

我在网站上有一个带有导航菜单的固定标题：

#header_wrapper
{
    height: 75px;
    background-color: #FD735B;
    z-index: 999;
    position: fixed;
    width: 100%;
}
#header_wrapper .control_wrapper
{
    position: absolute;
    right: 0px;
}
#header_wrapper .control_wrapper .control
{
    float: left;
    padding-left: 35px;
    padding-top: 25px;
    font-weight: bold;
}
.inner_content
{
    height: 100%;
    margin: 0px auto;
    width: 85%;
    position: relative;
    z-index: 1;
}

这是标题的 HTML：

<div id="header_wrapper">
<div class="inner_content">
    <div class="control_wrapper">
        <div class="control local">
            <a class="white_font" id="link_user_experience">USER EXPERIENCE</a>
        </div>
        <div class="control local">
            <a class="white_font" id="link_restocking">RESTOCKING EXPERIENCE</a>
        </div>
        <div class="control local">
            <a class="white_font" id="link_analytics">ANALYTICS</a>
        </div>
        <div class="control">
            <a class="white_font" id="link_team" href="team">TEAM</a>
        </div>
    </div>
</div>

问题是，当您调整窗口大小并使导航菜单上的狭窄部分被切断时。如果你试图水平滚动它仍然被切断。

这是截断标题的图像：

切断标题

我正在尝试滚动到右侧 - 内容已滚动，但标题保持不变：

在此处输入图像描述

调整大小后如何使标题看起来不错？

更新：

我试图在jsfiddle上重新创建我的问题。我为页面和标题设置了大宽度以模仿窄窗口（我的问题仅在用户调整窗口大小并使其变窄时出现）。

我在标题中放了 3 个标题。当您加载小提琴时，您只会看到其中的 2 个。第三个不在可视范围内。我认为您应该只水平滚动，固定标题将与页面的其余部分一起滚动。但是固定的标题没有滚动，你看不到标题#3。

换句话说，我需要固定标题才能像任何其他元素一样水平滚动。

4

3 回答 3

1

看起来您的导航内容是 position:absolute; 右：0px；即使调整了浏览器的大小，这也会导致您的导航尽可能向右移动。

如果您创建一个 li 和 float:right, display:inline-block 它应该为您提供您正在寻找的功能。

<nav>
    <ul>
       <li><a href="#">ABOUT</a></li>
       <li><a href="#">BLOG</a></li>
       <li><a href="#">CONTACT</a></li>
    </ul>
</nav>


nav{width:100%;position:absolute;background-color:red;}
nav li{float:right;display:inline-block; padding-right:10px;}

这是一个JSFiddle：

http://jsfiddle.net/gBYZ4/3/

编辑：清理我的 html 和小提琴。头球不小心飘到了右边。

于 2013-11-01T15:10:55.553 回答
0

有一个 AJAX 控件可以帮助克服这个问题。您可以使用“AlwaysVisibleControlExtender”。我已经在我的页面中使用了它，它工作得非常好。

下面是asp代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.header{width:100%;height:100px;position:fixed;z-index:1000;}
.content{padding-top:160px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release">
</ajaxToolkit:ToolkitScriptManager>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="lnkHome" HorizontalOffset="70" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender2" runat="server" TargetControlID="lnkLogout" HorizontalOffset="20" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender3" runat="server" TargetControlID="lblName" HorizontalOffset="110" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender5" runat="server" TargetControlID="Image1" HorizontalSide="Center" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>

<asp:Image ID="Image1" runat="server" Height="150px" ImageUrl="~/Image/ABC.jpg" Width="1594px" />
<p style="margin-left: 1240px; width: 187px;">
<asp:Label ID="lblName" runat="server" Font-Size="Small" Font-Names="Arial" ForeColor="White"> 
</asp:Label>
<asp:LinkButton ID="lnkHome" runat="server" Font-Size="Small" ForeColor="White" Font-Names="Arial">Home</asp:LinkButton>
<asp:LinkButton ID="lnkLogout" runat="server" Font-Size="Small" ForeColor="White" Font-Names="Arial">Logout</asp:LinkButton>
</p>

您需要拖放 Alwaysvisible 扩展器控件并如上提供目标控件 ID。希望这可以帮助。

于 2014-12-12T15:40:13.757 回答
0

也许您可以尝试我在固定顶部栏上编写的解决方案，该解决方案与页面的其余部分水平滚动，这似乎也是您想要的。

于 2013-11-05T13:13:54.790 回答