个人中心
gpt4 book ai didi

html - 菜单不会在 html 中移动到顶部

转载 作者：太空宇宙 更新时间：2023-11-04 11:40:52 25 4
gpt4 key购买 nike

您好，这是我的网站链接，菜单中显示的是 Logo 底部。但我想显示在 Logo 底部的右侧。这是我要更改的示例代码。

预期输出:

logo                  menus

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Olisvell | Home </title>
    <!--fonts-->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <!--//fonts-->
            <link href="css/bootstrap.css" rel="stylesheet">
            <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- for-mobile-apps -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="keywords" content="Wilcox Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
        Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
        <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- //for-mobile-apps -->  
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<!-- header -->
<div class="header">
    <div class="container">
        <div class="logo">
            <a href="index.html"><img src="images/logo.gif" alt=""/></a>
        </div>

        <div class="header-right">
            <ul>
        <li>Welcome Guest</li>
         <li>Free Register</li> 
         <li>Login</li>
     </ul>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!-- //header -->
<!-- navigation -->
<div class="navigation">
    <div class="container">
        <nav class="navbar navbar-default">

            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
                <li><a href="index.html">About Us</a></li>
                <li><a href="index.html">Services</a></li>
                <li><a href="index.html">Treatments</a></li>


                <li><a href="index.html">Partners</a></li>
                <li><a href="index.html">Visa Help</a></li>
                <li><a href="index.html">FAQ</a></li>
                <li><a href="index.html">Contact Us</a></li>
              </ul>

              <div class="clearfix"></div>
            </div><!-- /.navbar-collapse -->
        </nav>
    </div>
</div>
<!-- //navigation -->
<!-- banner -->
<div class="banner">
    <div class="container">
<!-- responsiveslides -->
                    <script src="js/responsiveslides.min.js"></script>
                        <script>
                            // You can also use "$(window).load(function() {"
                            $(function () {
                             // Slideshow 4
                            $("#slider3").responsiveSlides({
                                auto: true,
                                pager: false,
                                nav: true,
                                speed: 500,
                                namespace: "callbacks",
                                before: function () {
                            $('.events').append("<li>before event fired.</li>");
                            },
                            after: function () {
                                $('.events').append("<li>after event fired.</li>");
                                }
                                });
                                });
                        </script>
            <!-- responsiveslides -->
        <div  id="top" class="callbacks_container">
                    <ul class="rslides" id="slider3">
                        <li>
                            <div class="banner-info">
                                <div class="bann-top">

                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="banner-info">
                                <div class="bann-top second">

                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="banner-info">
                                <div class="bann-top second1">

                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="banner-info">
                                <div class="bann-top1">

                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </li>
                    </ul>
        </div>
    </div>
</div>
<!-- //banner -->
<!-- banner-bottom -->
<div class="bann-bot">
    <div class="container">
    <div class="news">
                <div class="news-left">
                <h1>Welcome to Olisvell</h1>
                    <p>ACROSS THE WORLD THE COST OF HEALTHCARE HAS ROCKETED AND THERE HAS BEEN A GREATER NEEED FOR FINDING AFFORDABLE AND TOP QUALITY HEALTHCARE. THIS IS A PHENOMENA THAT IS SPREADING ACROSS THE WORLD AND INDIA HAS BEEN GEARING UP FOR THIS IN THE LAST DECADE. INDIA IS NOW AN ESTABLISHED ENTITY IN MEDICAL TOURISM AND THE WORLD IS LOOKING AT IT FROM ALL SIDES.
WE AT OLISWELL, LOOK FORWAD TO HELP DIRECT YOUR HEALTH PROBLEMS TO THE BEST DOCTORS AVAILABLE IN BANGALORE, INDIA, THE MECCA OF MEDICAL TOURISM IN INDIA. WITH THE BEST WEATHER, CONNECTIVITY AND SURROUNDED BY TOURIST SPOTS AND THE ADDED TOP HEALTH INSTITITUES, IT REMAINS THE CHOICE OF DESTINATIONS FOR MEDICAL TOURISM. WE AT ALISWELL WILLMAKE SURE YOU CARRY THE BEST OF FEELINGS WHEN YOU LEAVE AFTER YOUR TREATMENTS.</p>
                </div>

                <div class="clearfix"></div>
            </div>
        <div class="banner-info-second">
            <div class="row bann-col">
                <div class="col-md-4 banner-grid">
                    <i></i><h2>Solutions Made Easy</h2>
                        <div class="clearfix"></div>
                    <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat
                        mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p>
                    <p><a class="btn btn-default" href="#" role="button">Read More</a></p>
                </div>
                <div class="col-md-4 banner-grid">
                    <span></span><h2>We Listen To You</h2>
                        <div class="clearfix"></div>
                    <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat
                        mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p>
                    <p><a class="btn btn-default" href="#" role="button">Read More</a></p>
                </div>
                <div class="col-md-4 banner-grid">
                    <label></label><h2>Monitoring your Output</h2>
                        <div class="clearfix"></div>
                    <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat
                        mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p>
                    <p><a class="btn btn-default" href="#" role="button">Read More</a></p>
                </div>

            </div>

        </div>

    </div>
</div>
<!-- //banner-bottom -->
<!-- news-bottom -->
<!--
<div class="news-bottom">
    <div class="container"> 
        <div class="news-pad">
            <div class="row news-bot">
                <div class="col-md-3 news-grid">
                    <h3>Pages</h3>
                    <ul>
                        <li><a href="#">Suspendisse Vulputate </a></li>
                        <li><a href="#">Fringilla Arcu et Porttitor</a></li>
                        <li><a href="#">Mauris Placerat Mattis </a></li> 
                        <li><a href="#">Tellus id Sodales </a></li>
                        <li><a href="#">Magnust Qisit</a></li>
                    </ul>         
                </div>
                <div class="col-md-3 news-grid">
                    <h3>Main Menu</h3>
                    <ul>
                        <li><a href="#">Suspendisse Vulputate </a></li>
                        <li><a href="#">Fringilla Arcu et Porttitor</a></li>
                        <li><a href="#">Mauris Placerat Mattis </a></li> 
                        <li><a href="#">Tellus id Sodales </a></li>
                        <li><a href="#">Magnust Qisit</a></li>
                    </ul>                             
                </div>
                <div class="col-md-3 news-grid">
                    <h3>Latest News & Events</h3>
                    <ul>
                        <li><a href="#">Suspendisse Vulputate </a></li>
                        <li><a href="#">Fringilla Arcu et Porttitor</a></li>
                        <li><a href="#">Mauris Placerat Mattis </a></li> 
                        <li><a href="#">Tellus id Sodales </a></li>
                        <li><a href="#">Magnust Qisit</a></li>
                    </ul>                             
                </div>
                <div class="col-md-3 news-grid">
                    <h3>Blog Posts</h3>
                    <ul>
                        <li><a href="#">Suspendisse Vulputate </a></li>
                        <li><a href="#">Fringilla Arcu et Porttitor</a></li>
                        <li><a href="#">Mauris Placerat Mattis </a></li> 
                        <li><a href="#">Tellus id Sodales </a></li>
                        <li><a href="#">Magnust Qisit</a></li>
                    </ul>                             
                </div>
            </div>
        </div>
    </div>
</div>-->
<!-- //news-bottom -->
<!-- footer -->
<div class="footer">
    <div class="container">
        <p>Copyright &copy; 2015 OLISVELL, Inc.</p>
    </div>
</div>
<!-- footer -->
<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- js -->
         <script src="js/bootstrap.js"></script>
    <!-- js -->
</body>
</html>

最佳答案

将您的 html 更改为

<!DOCTYPE html>
<html>
<head>
    <title>Olisvell | Home </title>
    <!--fonts-->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <!--//fonts-->
            <link href="css/bootstrap.css" rel="stylesheet">
            <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- for-mobile-apps -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="keywords" content="Wilcox Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
        Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
        <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- //for-mobile-apps -->  
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<!-- header -->
<div class="header">
    <div class="container">


        <div class="header-right">
            <ul>
        <li>Welcome Guest</li>
         <li>Free Register</li> 
         <li>Login</li>
     </ul>
        </div>
<div class="logo">
            <a href="index.html"><img src="images/logo.gif" alt=""/></a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
                <li><a href="index.html">About Us</a></li>
                <li><a href="index.html">Services</a></li>
                <li><a href="index.html">Treatments</a></li>


                <li><a href="index.html">Partners</a></li>
                <li><a href="index.html">Visa Help</a></li>
                <li><a href="index.html">FAQ</a></li>
                <li><a href="index.html">Contact Us</a></li>
              </ul>

              <div class="clearfix"></div>
            </div><!-- /.navbar-collapse -->
        <div class="clearfix"></div>
    </div>
</div>
<!-- //header -->
<!-- navigation -->
<div class="navigation">
    <div class="container">
        <nav class="navbar navbar-default">

            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>


        </nav>
    </div>
</div>
<!-- //navigation -->
<!-- banner -->
<div class="banner">
    <div class="container">
<!-- responsiveslides -->
                    <script src="js/responsiveslides.min.js"></script>
                        <script>
                            // You can also use "$(window).load(function() {"
                            $(function () {
                             // Slideshow 4
                            $("#slider3").responsiveSlides({
                                auto: true,
                                pager: false,
                                nav: true,
                                speed: 500,
                                namespace: "callbacks",
                                before: function () {
                            $('.events').append("<li>before event fired.</li>");
                            },
                            after: function () {
                                $('.events').append("<li>after event fired.</li>");
                                }
                                });
                                });
                        </script>
            <!-- responsiveslides -->
        <div  id="top" class="callbacks_container">
                    <ul class="rslides" id="slider3">
                        <li>
                            <div class="banner-info">
                                <div class="bann-top">

                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="banner-info">
                                <div class="bann-top second">

                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="banner-info">
                                <div class="bann-top second1">

                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="banner-info">
                                <div class="bann-top1">

                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </li>
                    </ul>
        </div>
    </div>
</div>
<!-- //banner -->
<!-- banner-bottom -->
<div class="bann-bot">
    <div class="container">
    <div class="news">
                <div class="news-left">
                <h1>Welcome to Olisvell</h1>
                    <p>ACROSS THE WORLD THE COST OF HEALTHCARE HAS ROCKETED AND THERE HAS BEEN A GREATER NEEED FOR FINDING AFFORDABLE AND TOP QUALITY HEALTHCARE. THIS IS A PHENOMENA THAT IS SPREADING ACROSS THE WORLD AND INDIA HAS BEEN GEARING UP FOR THIS IN THE LAST DECADE. INDIA IS NOW AN ESTABLISHED ENTITY IN MEDICAL TOURISM AND THE WORLD IS LOOKING AT IT FROM ALL SIDES.
WE AT OLISWELL, LOOK FORWAD TO HELP DIRECT YOUR HEALTH PROBLEMS TO THE BEST DOCTORS AVAILABLE IN BANGALORE, INDIA, THE MECCA OF MEDICAL TOURISM IN INDIA. WITH THE BEST WEATHER, CONNECTIVITY AND SURROUNDED BY TOURIST SPOTS AND THE ADDED TOP HEALTH INSTITITUES, IT REMAINS THE CHOICE OF DESTINATIONS FOR MEDICAL TOURISM. WE AT ALISWELL WILLMAKE SURE YOU CARRY THE BEST OF FEELINGS WHEN YOU LEAVE AFTER YOUR TREATMENTS.</p>
                </div>

                <div class="clearfix"></div>
            </div>
        <div class="banner-info-second">
            <div class="row bann-col">
                <div class="col-md-4 banner-grid">
                    <i></i><h2>Solutions Made Easy</h2>
                        <div class="clearfix"></div>
                    <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat
                        mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p>
                    <p><a class="btn btn-default" href="#" role="button">Read More</a></p>
                </div>
                <div class="col-md-4 banner-grid">
                    <span></span><h2>We Listen To You</h2>
                        <div class="clearfix"></div>
                    <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat
                        mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p>
                    <p><a class="btn btn-default" href="#" role="button">Read More</a></p>
                </div>
                <div class="col-md-4 banner-grid">
                    <label></label><h2>Monitoring your Output</h2>
                        <div class="clearfix"></div>
                    <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat
                        mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p>
                    <p><a class="btn btn-default" href="#" role="button">Read More</a></p>
                </div>

            </div>

        </div>

    </div>
</div>
<!-- //banner-bottom -->
<!-- news-bottom -->
<!--
<div class="news-bottom">
    <div class="container"> 
        <div class="news-pad">
            <div class="row news-bot">
                <div class="col-md-3 news-grid">
                    <h3>Pages</h3>
                    <ul>
                        <li><a href="#">Suspendisse Vulputate </a></li>
                        <li><a href="#">Fringilla Arcu et Porttitor</a></li>
                        <li><a href="#">Mauris Placerat Mattis </a></li> 
                        <li><a href="#">Tellus id Sodales </a></li>
                        <li><a href="#">Magnust Qisit</a></li>
                    </ul>         
                </div>
                <div class="col-md-3 news-grid">
                    <h3>Main Menu</h3>
                    <ul>
                        <li><a href="#">Suspendisse Vulputate </a></li>
                        <li><a href="#">Fringilla Arcu et Porttitor</a></li>
                        <li><a href="#">Mauris Placerat Mattis </a></li> 
                        <li><a href="#">Tellus id Sodales </a></li>
                        <li><a href="#">Magnust Qisit</a></li>
                    </ul>                             
                </div>
                <div class="col-md-3 news-grid">
                    <h3>Latest News & Events</h3>
                    <ul>
                        <li><a href="#">Suspendisse Vulputate </a></li>
                        <li><a href="#">Fringilla Arcu et Porttitor</a></li>
                        <li><a href="#">Mauris Placerat Mattis </a></li> 
                        <li><a href="#">Tellus id Sodales </a></li>
                        <li><a href="#">Magnust Qisit</a></li>
                    </ul>                             
                </div>
                <div class="col-md-3 news-grid">
                    <h3>Blog Posts</h3>
                    <ul>
                        <li><a href="#">Suspendisse Vulputate </a></li>
                        <li><a href="#">Fringilla Arcu et Porttitor</a></li>
                        <li><a href="#">Mauris Placerat Mattis </a></li> 
                        <li><a href="#">Tellus id Sodales </a></li>
                        <li><a href="#">Magnust Qisit</a></li>
                    </ul>                             
                </div>
            </div>
        </div>
    </div>
</div>-->
<!-- //news-bottom -->
<!-- footer -->
<div class="footer">
    <div class="container">
        <p>Copyright &copy; 2015 OLISVELL, Inc.</p>
    </div>
</div>
<!-- footer -->
<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- js -->
         <script src="js/bootstrap.js"></script>
    <!-- js -->
</body>
</html>

关于html - 菜单不会在 html 中移动到顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31337931/

25 4 0
文章推荐： html - 在谷歌地图上创建放大和缩小工具按钮
文章推荐： c++ - 全局范围与文件范围
文章推荐： mysql - 从 MySQL 中的其他数据库链接表
文章推荐： java - 如何解决Java中从double到int的类型不匹配错误
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com