html - 标题导航随着浏览器调整大小的变化而中断-6ren

html - 标题导航随着浏览器调整大小的变化而中断

转载作者：太空宇宙更新时间：2023-11-03 18:24:55

为什么标题导航会随着浏览器调整大小的变化而中断？如何解决？我尝试了不同的方法，但我没有发现问题!我请求有人解释并解决问题。请帮忙。

HTML

<!DOCTYPE>
<html="en">
    <head>
        <title>NewsHour24</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <header>
            <div class="logo">
                <img src="imgs/logo.png" alt="News Hour 24 logo"/>
            </div>
            <nav>
            <div class="header-nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Health</a></li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Education</a></li>
                    <li><a href="#">Entertainment</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Sign Up</a></li>
                </ul>
            </div>
            </nav>
        </header>           <!-------------*Header ends here*-------------->

        <div class="content-area">
            <div class="content">
                <h1>News Hour 24</h1>
                <p>NH24 is a free online NEWS site. NH24 stands for News Hour 24. Our aim is to circulate truth,unbiased and latest news of 24 hours.NH24 covers all news  </p> 
                <p>You can easily update and share news with us.Your collaboration is our expectation</p>

                <h3>header3</h3>
                <p>paragraph paragraph paragraph</p>
            </div>

            <footer>

            <p>Footer</p>

            <ul>
                <li><a href="#">Home</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Health</a></li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Education</a></li>
                    <li><a href="#">Entertainment</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Sign Up</a></li>
            </ul>
            </footer>
        </div>
    </body>

</html>

CSS:

    /**
    * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
    * Richard Clark (http://richclarkdesign.com)
    * http://cssreset.com
    */
    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }
    body {
    line-height:1;
    }
    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section {
    display:block;
    }
    nav ul {
    list-style:none;
    }
    blockquote, q {
    quotes:none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content:'';
    content:none;
    }
    a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }
    /* change colours to suit your needs */
    ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
    }
    /* change colours to suit your needs */
    mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
    }
    del {
    text-decoration: line-through;
    }
    abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
    }
    table {
    border-collapse:collapse;
    border-spacing:0;
    }
    /* change border colour to suit your needs */
    hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
    }
    input, select {
    vertical-align:middle;
    }

    /*-------------------------------------CSS RESET ENDS----------------------------*/

    body {

        background-color: #7CB038;
         width:auto;
     }
    header {

        width:auto;
        background:red;
        height: 150px;
    }   
    .logo{

        float: left;
        clear: both;
        margin:10px 5px 1px 110px;
        width:200px;
        height:66px;

    }

    nav {
        display:block;
        padding:0;
        font-size: 1.3em;
        text-align:center;
        padding:0;
        list-style-type:none;
        margin: 0px 5px 10px 0px;
        height:50px;



    }
    nav ul li {

        display: inline;
        border-right:5px solid #fff ;
        padding:10px;

          }

    nav a{
        display:inline-block; 
        text-decoration: none;
        color:white;
        display:inline-block;

    } 

    .content-area{
        margin: 0 auto;
        font-family: sans-serif; open-sans;
        width:60%;
    }

最佳答案

如果您希望菜单不会中断，请设置固定宽度。

更新 fiddle - http://jsfiddle.net/begtw/6/

删除不需要的标签
将一些 class 更改为 id(像 div#content-area 这样的元素在每个页面上都是唯一的，因此有一个每页单次使用 id 更有意义)
将 Logo id 直接添加到 Logo 图像。图片位于左侧

HTML

 <header>
       <img src="imgs/logo.png" id="logo" alt="News Hour 24 logo" />
       <nav id="nav-header">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Technology</a></li>
                <li><a href="#">Health</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">Education</a></li>
                <li><a href="#">Entertainment</a></li>
                <li><a href="#">Support</a></li>
                <li><a href="#">Sign Up</a></li>
            </ul>
        </nav>
    </header>

CSS - 固定宽度。 #logo 绝对定位。

nav#nav-header {
    display:block;
    padding:0;
    font-size: 1em;
    padding:0;
    list-style-type:none;
    margin: 15px 5px 10px 160px; /*Large left margin to fit #logo*/
    height:50px;
    float: left;
    width: 1100px;
}

#logo{
    position: absolute;
    left: 10px; top: 10px;
}

这将修复您的菜单。但是，对于较小的屏幕尺寸，您可能需要更多的灵 active :)

玩一玩，把它变成你自己的。

山姆

关于html - 标题导航随着浏览器调整大小的变化而中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21012640/

文章推荐： javascript - 响应式网站的 Scrollorama Parallax

文章推荐： python - 在Python中迭代对象实例的特定属性

java - 如何将 IE 浏览器 session 切换到 Chrome 浏览器 session ？
我的“登录”是在 IE 浏览器中进行的，登录后，如果我单击链接，它们就会在 Chrome 浏览器中打开。如何在同一个测试用例中将我当前的浏览器从 IE 切换到 Chrome。如果我创建一个 chrom
css - 在 Firefox 中，与 css 内容属性一起使用的特殊字符比在 Firefox 中更薄。浏览器/浏览器
您好，我不明白在 Firefox 的内容属性中使用的特殊字符的不同显示行为。我已经剥离了一切并创造了一支笔: http://codepen.io/rpkoller/pen/Fbgav 在其“基本形式”
java - Spring Data REST - HAL 浏览器 - 返回 HAL 浏览器 HTML 而不是 API 的根
我正在研究 Spring Data REST，特别是 HAL 浏览器。我一直在关注 http://docs.spring.io/spring-data/rest/docs/current/refere
Jquery if 浏览器
我正在使用工具提示，在 ie 上出现定位错误。我放了jquery浏览器代码我的工具提示 $('.tooltip').tooltip({ position: "bottom center"
javascript - bluebirdjs协程错误处理(浏览器)
我应该如何处理蓝鸟协程中的错误？我使用co in节点已有一段时间，它具有出色的捕获功能。 co(function*() { return new Promise(function(resol
JavaFX WebView 浏览器
package webviewbrowser; import java.util.List; import javafx.application.Application; import javafx.
javascript - 浏览器/JavaScript同源策略如何应用于二级域名？
我有一些 JavaScript 在同一域上的两个独立服务器之间共享请求。 .com 是 JavaScript 中域的要求吗？在这种情况下，两台服务器都位于 .abc.tyy 域上，tyy 通常是 .
JavaFX WebView 浏览器
package webviewbrowser; import java.util.List; import javafx.application.Application; import javafx.
构建以前版本的 Chromium 浏览器
我正在尝试构建仍支持 NPAPI 的先前版本的 Chromium 浏览器。我已经获得了代码，并且可以使用 stand build 命令在我的 mac 上构建最新版本的 Chromium gclient
python - Python 浏览器
我环顾四周，找不到 browscap 的 Python 等效项(我在 PHP 中使用它来检测给定的用户代理字符串是什么浏览器。我希望我不必自己写......:P 最佳答案看看这个，它应该做你想要的
javascript - 浏览器 - 文件编写器扩展？
是否有任何 chrome 或 firefox 扩展允许 javascript 在客户端 PC 中创建写入文件？最佳答案你想做什么？ HTML5 有一个 File API .这是最好的解决方案，因为
javascript - 浏览器/选项卡关闭检测时发出警报
当我点击链接或刷新或关闭标签页时，我有这段代码会发出警报。但我需要在关闭窗口(选项卡)上仅发出警报。怎么做？我的网站上有很多外部和内部链接。
javascript - Angular +浏览器
我目前正在尝试使用 Browserify + Angular，但我遇到了一个奇怪的问题。我在我的 Controller 的子目录中创建了一个名为 controllers/start-controlle
testing - 响应式布局针对哪些设备/浏览器
我正在为客户(项目已被接受，但现在是解释不同功能的问题)写一份详细的估算，以开发一个响应式布局的网站。这不是我第一次进行此类开发，但这是一个关键客户，必须铺平道路。布局将从 300px 宽度调整到
css - 浏览器/网络邮件客户端中的默认打印样式
我在时事通讯上设计了一些黑底白字。由于时事通讯在打印时看起来不错且可读。我需要使布局和文本与浏览器中的内容相似。通常情况下，黑色文本和无背景颜色是浏览器/网络邮件客户端的默认打印样式吗？最佳答案
Android 浏览器 - 无法将输入文本从白色更改为黑色
我有一个使用 GWT/mGWT 构建的移动友好网络应用程序。该应用程序有白色输入文本框和深灰色输入文本。但是，在 Android 浏览器上，文本显示为白色，因此是不可见的。我尝试的所有 CSS 都无法
javascript - 浏览器 - 强制重新加载删除cookie？
我创建了一个带有选择输入的页面来更改正在使用的 jQuery UI 主题。当主题更改时，它会存储在 cookie 中。页面加载时，如果 cookie 存在，则恢复主题，否则加载默认主题。当我使用 F
css - 浏览器/渲染引擎如何知道在哪里连接单词？
在我的 CSS 中，我使用了以下代码片段: word-break: break-word; -webkit-hyphens: auto; hyphens: auto; 渲染引擎如何知道在所有不同语言中
CSS WordPress 浏览器
我的网络浏览器 Safari 有问题，我在 Chrome、FireFox 中测试了我的网站。 Safari 版本也是正确的，但是，当需要在 1920x1080 或更高分辨率下对其进行测试时，它无法正常
PHP headless 浏览器？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 标题导航随着浏览器调整大小的变化而中断