个人中心
gpt4 book ai didi

html - 小空间一直显示在我网站的右侧 w

转载 作者：行者123 更新时间：2023-11-28 10:27:01 25 4
gpt4 key购买 nike

我一直在处理这个网页，但一直遇到这个问题。每当我在我的 mac 上查看谷歌浏览器中的页面时，当我向右滚动时，我会在页面右侧看到一小块空间。我不太确定如何解决这个问题。这是一张显示我在说什么的图片，以及我的 html 和 css。提前感谢任何可以帮助我的人。

图片: http://imgur.com/0JAZsgg&KcUfJZl&ephxQZC#2

这是我的 html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../scripts/javascript/responsive_drop_down.js"></script>
    <link href="../css/main_stylesheet.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="../css/print_stylesheet.css" rel="stylesheet" type="text/css" media="print"/>
</head>

<body>
    <div id="wrapper">
        <header>
            <h1>This is a placeholder <br />
                for header</h1>
        </header>

        <nav class="nm">
            <div class="mobilmenu"></div>
            <div class="mobile-container">
                <ul>
                    <li class="white"><a href="#">Home</a></li>
                    <li class="red"><a href="#">Video</a></li>
                    <li class="purple"><a href="#">Pictures</a></li>
                    <li class="blue"><a href="#">Audio</a></li>
                    <li class="green"><a href="#">Other Work</a></li>
                    <li class="yellow"><a href="#">About Me</a></li>
                    <li class="gray"><a href="#">Contact Me</a></li>
                </ul>
            </div>    
        </nav>

        <div class="content-container">

            <article class="content-main">
                <section>
                    <h1>Heading goes here...</h1>
                    <time datetime="#">Time will go here.</time>
                    <p>Content will go here...</p>
                </section>
            </article>

            <aside class="sidebar">
                    <p>More Content to come soon.</p>
            </aside>
        </div>    

        <div class="footer-position">
            <footer>
                <span class="copyright">All rights reserved 2014.</span>

                <nav class="nf">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Video</a></li>
                        <li><a href="#">Pictures</a></li>
                        <li><a href="#">Audio</a></li>
                        <li><a href="#">Other Work</a></li>
                        <li><a href="#">About Me</a></li>
                        <li><a href="#">Contact Me</a></li>
                    </ul>
                  </nav>
              </footer>
           </div>    
       </div>
   </body>
</html>

这是CSS:

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic);
@font-face 
{
font-family: 'bebas_neueregular';
src: url('../font/BebasNeue/bebasneue-webfont.eot');
src: url('../font/BebasNeue/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../font/BebasNeue/bebasneue-webfont.woff') format('woff'), 
     url('../font/BebasNeue/bebasneue-webfont.ttf') format('truetype'), 
     url('../font/BebasNeue/bebasneue-webfont.svg#bebas_neueregular') format('svg'), 
     url('../font/BebasNeue/BebasNeu.otf') format('opentype');
font-weight: normal;
font-style: normal;

}


body
{
width:100%;
font-family: 'Ubuntu', sans-serif;
margin:0;
padding:0;
background-color:#84888B;
overflow-y:scroll;
direction:ltr;
display:block;
}

#wrapper
{
display:block;
width:100%;
margin:0 auto;
padding:0 auto;
}

header
{
font-family:'bebas_neueregular', sans-serif;
background-color:#5D0660;
color:#E21208;
text-align:center;
padding:15px;
}

nav
{
display:block;
font-family:'bebas_neueregular', sans-serif;
text-align:center;
overflow:hidden;
}

nav ul
{
list-style:none;
}

nav ul li
{
display:inline-block;
}

nav ul li a
{
text-decoration:none;
}

nav.nm
{
width:100%;
background-color:#000000;
font-size:125%;
margin:0;
padding:0;
}

nav.nm ul
{
margin:0 auto;
margin-top:0;
}

nav.nm ul li a
{
display:block;
color:#ffffff;
padding:15px 16px;
}

nav.nm ul li a:hover
{
color:#000000;
-webkit-transition:450ms ease;
-moz-transition:450ms ease;
transition:450ms ease;
}

nav.nm ul li.white a:hover
{
background-color:#ffffff;
}

nav.nm ul li.red a:hover
{
background-color:#E21208;
}

nav.nm ul li.purple a:hover
{
background-color:#9E00A3;
}

nav.nm ul li.blue a:hover
{
background-color:#1A297F;
}

nav.nm ul li.green a:hover
{
background-color:#319032;
}

nav.nm ul li.yellow a:hover
{
background-color:#E1E13D;
}

nav.nm ul li.gray a:hover
{
background-color:#84888B;
}

nav.nf
{
font-size:85%;
}

nav.nf ul li:last-child 
{
border-right:none;
}

nav.nf ul li 
{
border-right:1px solid #000000;
}

nav.nf ul li a
{
display:block;
padding:2px 9px;
color:#000000;
}

nav.nf ul li a:hover
{
color:#ffffff;
}



footer
{
width:100%;
background-color:#1A297F;
text-align:center;
margin-top:38.6%;
padding:0.2%;
}

最佳答案

我刚刚在我的 Windows 8 机器上试过你的代码，我没有发现任何问题。您的屏幕截图看起来像 margin 问题。如果您不熟悉边距和填充的工作原理，html dog 上的这张小图帮助我理解了它的工作原理:

http://www.htmldog.com/guides/css/beginner/margins/

如果问题特定于 Mac 上的 Google chrome(不幸的是我无法访问它)，我认为该版本的 chrome 的默认 CSS 样式可能会妨碍。良好的 CSS 重置可以解决问题:

http://meyerweb.com/eric/tools/css/reset/

只需将该代码复制并粘贴到您的 CSS 文件中，任何适本地覆盖 CSS 重置的代码都将优先，留下重置来修复浏览器之间的任何细微差异。

关于html - 小空间一直显示在我网站的右侧 w，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23693196/

25 4 0
文章推荐： html - 如何在导航项下方对齐下拉菜单
文章推荐： javascript - 使用 jQuery( Accordion 技术)扩展内容......快速问题
文章推荐： css - svg stroke-dashoffset 百分比值的基础是什么
文章推荐： ios - 如何在 Swift UI 中实现本地化
行者123
个人简介

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

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