css导航横向显示的

CSS导航横向显示的基础概念

CSS导航横向显示是指通过CSS技术将导航菜单项水平排列，使得用户可以直观地看到所有的导航选项。这种布局方式常见于网站的顶部或侧边栏，方便用户快速切换页面。

类型

固定导航：导航栏固定在页面顶部，不会随着页面滚动而移动。
浮动导航：导航栏可以随着页面滚动而移动，通常在页面滚动到一定位置时固定在顶部。
下拉导航：点击某个导航项时，会展开一个包含多个子选项的下拉菜单。

应用场景

网站首页
企业官网
电商平台
社交媒体

示例代码

以下是一个简单的CSS导航横向显示的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Horizontal Navigation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .navbar {
            background-color: #333;
            overflow: hidden;
        }
        .navbar a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </div>
</body>
</html>

参考链接

常见问题及解决方法

问题：导航项之间有间隙

原因：可能是由于浏览器默认样式或空格导致的。

解决方法：

.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    margin-right: 0; /* 移除默认的margin */
}

或者使用Flexbox布局：

.navbar {
    display: flex;
    background-color: #333;
    overflow: hidden;
}
.navbar a {
    color: #f2f2f2;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

问题：导航项在移动设备上显示不正常

原因：可能是由于没有适配移动设备的屏幕尺寸。

解决方法：

@media screen and (max-width: 600px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}

或者使用响应式导航栏库，如Bootstrap：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<div class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

通过以上方法，可以有效地解决CSS导航横向显示中的常见问题。

页面内容是否对你有帮助？

有帮助

没帮助

特定于媒体查询的平板电脑环境

到目前为止，这就是我所做的，但它并不是像联想think等屏幕更大的android平板电脑那样100%解决问题。我正在使用媒体查询来使我的网站响应，这就是我目前使用的…and (max-device-width : 1024px) a.LiveOnline { display: none; }} 有没有你能

浏览 0提问于2012-03-30得票数 6

1回答

iOS方向问题

、、

我们只在纵向模式下有某些视图，而在横向模式下有某些视图。我们需要使用出现在侧面导航中的选项按钮在这些视图之间来回切换。通过按下按钮，侧面导航将打开，侧面导航应同时适用于纵向和横向模式。默认情况下，着陆屏处于纵向模式，用户可以从那里切换到横向视图，反之亦然。对于在横向模式下出现的视图，无论用户在该时刻将设备保持在纵向方向，它们都必须正确地显示在横向模式中，当横向视图显示</e

浏览 1提问于2012-06-26得票数 0

回答已采纳

4回答

为什么我的导航栏不能像在肖像中那样在横向滚动？

、

我有一个导航栏与一堆样本文本(只是为了测试)，它将滚动时，我有它在纵向模式，但没有横向。我已经使用overflow: scroll的肖像，它的工作，但我有单独的代码为景观，它有相同的东西，但它不会滚动。这是我的代码，可以复制这个问题。event.stopPropagation(); 'width': 100 + '%&#x

浏览 43提问于2019-05-03得票数 2

3回答

在横向模式下将UIView放在UINavigationcontroller上

、、

在横向模式下，在UINavigationController上显示UIView的最佳方式是什么？正在尝试将myView放置在导航栏下。self.window addSubView: myView 将在纵向显示myView (即向左或向右旋转90度)。我可以轮换，但我希望有更好的解决方案。

浏览 0提问于2012-11-14得票数 1

回答已采纳

1回答

背景图像/导航栏图像iOS的适当大小

、、

我想知道正确的尺寸是用来做什么的( iOS的版本重要吗？)2)为UINavigationBar设置背景图像，同样是在那些不同的设备版本/os版本上提前谢谢你。

浏览 5提问于2013-07-17得票数 2

回答已采纳

1回答

从纵向视图到横向视图的xcode导航

、、、、

我有一个简单的ios导航应用。我的问题是在一个只允许在纵向显示的viewController和一个必须在横向显示的viewController之间导航。问题是第二个viewController在加载时不会显示在景观中。如果我旋转设备，它会按它应该的方式更新，但我希望因为它只支持横向，所以它应该在转换到视图时首先自动捕捉到横向。有什么想法吗？谢谢

浏览 0提问于2012-08-27得票数 0

1回答

Android -如何以编程方式更改导航栏位置

、、

我有一个以横向模式显示的活动。我希望导航栏位于一侧(软件谁是没有物理按钮显示在设备上)。我已经搜索过了，但我找不到一种方法来创建一个像上面这样的布局。你能给我一些关于如何实现这个结果的建议吗？

浏览 0提问于2016-06-23得票数 0

1回答

iPad导航控制器横向问题

、、、、

我正在将我的应用程序更改为通用的，并希望iPad的所有视图都处于横向模式。我的第一个视图是一个UIViewController，它是使用以下命令添加到窗口的：使用此视图，您可以选择一个按钮并显示导航控制器导航控制器按如下方式添加： [[[UIApplication sharedApplication] keyWindow] addSubview:nav

浏览 1提问于2011-04-10得票数 2

1回答

如何让移动导航菜单以横向模式显示？

、

我正在尝试调整一个603x966 (即Nexus 7)的css分辨率的平板电脑，当在横向模式导航菜单进入这个荒谬的模式“更多导航选项”(不是我写的，我找不到css来修复它)。它应该进入移动菜单，或者，因为屏幕仍然足够宽，导航栏应该仍然适合。请参阅下面的仿真。你必须点击左上角的选项，并将方向设置为横向，才能看到我正在谈论的内容。在肖像中，页面看起来很好，只是<e

浏览 0提问于2016-04-22得票数 0

2回答

在纵向应用程序中显示一个横向视图

、

我有一个视频视图，我想要显示在风景，但在我的应用程序中的其他一切都是肖像只。我不确定如何实现这一点。

浏览 1提问于2014-02-15得票数 1

1回答

如何在使用splitViewController时使景观视图看起来与portraitView相同？

、、

我的意思是，当我们使用UISplitViewController项目时我想要的是，即使在横向模式下，它也应该类似于纵向模式。在横向模式下，整个窗口应该被视图覆盖。为了导航</

浏览 0提问于2010-04-20得票数 0

回答已采纳

1回答

在包含UINavigationController的UITabBarController中限制横向视图

、、、

我有一个选项卡栏应用程序，其中2个选项卡中包含导航视图。我希望在1导航控制器中的1个视图允许横向视图，但由于选项卡栏中的导航栏限制，我现在必须允许我的应用程序中的每个单独视图的横向视图，以使倾斜消息传递到我的应用程序，这是我不想要的。我想，也许，在不应该转到横向的视图上，可能有方法可以防止视图更改，例如，每当设备进入横向时调用s

浏览 0提问于2010-05-06得票数 2

回答已采纳

2回答

强制UIViewController处于横向模式iOS7

、、、

我已经实现了适当的函数，但是它们没有被触发吗？我在StackOverFlow上尝试了几种解决方案，但都不起作用。我试着将视图添加到UINavigationController中，也不起作用。

浏览 0提问于2014-02-07得票数 3

2回答

在基于导航的应用程序中，LandscapeViewController仅支持横向模式(所有其他应用程序都支持这两种模式)。我还有一个“加载屏幕”，建议用户在继续之前旋转手机。这样，我可以确保当我的景观视图加载时，它处于景观模式。当我将手机旋转到纵向模式，同时仍然显示LandscapeVC时，问题就来了。我按下向后导航键向上导航(到同时支持横向和纵向模式的VC )，但上层显示为横向模式，即使手机处于

浏览 2提问于2010-01-19得票数 3

1回答

只需要纵向模式下的选项卡栏和横向模式下的所有viewControllers

、、

我正在开发一个横向模式的iOS应用程序，除了我需要标签栏在右边(垂直)。我想知道我是否可以在横向模式下显示所有的viewControllers(导航驱动应用程序)，而在纵向模式下仅显示tabbarController？换句话说，我是否可以将所有viewControllers的方向设置为横向模式，并将仅TabBarController的方向设置为横向模式，以便我可以使其显示在右侧？任何指针都是非常感

浏览 0提问于2013-03-02得票数 0

1回答

旋转装置后不一致的div宽度

、、、、

我有一个流畅的布局，页面导航在底部。我使我的导航在所有我能够掌握的平台上正确显示，但是在iOS‘Safari中有一个不一致的地方。Safari没有正确地显示纵向方向的导航，但是如果我将其旋转到横向模式，然后再次显示导航，则是很好的。用于导航的HTML如下所示： <nav id="nav-belo

浏览 4提问于2014-04-06得票数 0

2回答

如何在导航到UIViewController时将其旋转到其支持的界面方向？

、、、

supportedInterfaceOrientations]; return UIInterfaceOrientationMaskAll;这非常有效，如果需要锁定视图，我可以“覆盖”当前centerViewController中的supportedInterfaceOrientations问题是，被锁定的视图在导航时不会旋转到其支持的方向。一个视图锁定在纵向视图中，但当在横向视图中显示另一个视图并导航到此视图时，即使此视图不支持横向<

浏览 5提问于2016-01-07得票数 2

2回答

UINavigationController堆栈中UIViewControllers的不同接口方向

、、、、

我有一个导航控制器，带有一个带有纵向的rootviewcontroller。然后，我想将第二个视图控制器推送到具有横向的堆栈中。不幸的是，我发现没有办法强制应用程序重新检查supportedInterfaceOrientations。因此，在用户将其设备旋转到横向之前，横向视图控制器一直显示在侧面。我准备了一个测试项目：是否有可能自动更改导航控制器堆栈中的方向？

浏览 0提问于2016-08-04得票数 2

1回答

iPad uitableview旋转横向和纵向时关闭查看位置

、、、

我正在开发一个iPad图形用户界面与2 uitableview顶部和底部，都占据了半个屏幕与一个导航控制器。当我旋转视图时，表会向上移动并隐藏在导航控制器后面。当启动时，它不会。它只发生在它旋转的时候。图1显示了启动时的表格。图2显示了旋转到横向时缺少的列。图3显示了移回纵向时缺少的列。有没有可能在纵向和横向时在屏幕上编码一个固定位置？意思是当我检测到iPad是纵向的和横向

浏览 2提问于2011-12-05得票数 1

2回答

在导航控制器弹出子视图后，强制parentView刷新视图

我有secondViewController，可以显示在横向和纵向视图的内容。MainViewController (secondViewController的父级)只能以横向模式显示内容。当SecondView处于纵向模式并弹出时，视图MainViewController (应仅以横向模式显示内容)以纵向方式显示内容。它不会刷新到横向模式。在MainViewController的viewWillA

浏览 0提问于2012-07-19得票数 1

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

css导航横向显示的