Html 屏幕尺寸较小时，第n个子项不属性_Html_Css_Css Selectors

Html 屏幕尺寸较小时，第n个子项不属性

html css

Html 屏幕尺寸较小时，第n个子项不属性,html,css,css-selectors,Html,Css,Css Selectors,这是我的相关css（只是手机版本。与电脑版本的区别是“（最大宽度：1223px）”变为“（最小宽度：1224px）”：以及html： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Aversion Gaming</title> <link href='http://fonts.googleapis.com/css?famil

这是我的相关css（只是手机版本。与电脑版本的区别是“（最大宽度：1223px）”变为“（最小宽度：1224px）”：

以及html：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aversion Gaming</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans'
    rel='stylesheet' type='text/css'>
<link href='css/style.css' rel='stylesheet' type='text/css'>
</head>
<body>
    <section>
        <header>
            <nav>
                <ul>
                    <li>Home</li>
                    <li>Teams</li>
                    <li>Contact</li>
                    <li>Sponsors</li>
                </ul>
            </nav>
            <div class="logo"></div>
        </header>
    </section>

    <div id="wrap">
        <div id="sectionLeft">
            <h2>News</h2>
            <section id="newsSection">
                <h3>Test news post</h3>
                <p id="newsText">This is just a test news post.</p>
                <a style="font-size: 12px;" href="#">Read More...</a>
            </section>
            <section id="newsSection">
                <h3>Finally, a website!</h3>
                <p id="newsText">We have finally created a website thanks to
                    @AversionRastro!</p>
                <a style="font-size: 12px;" href="#">Read More...</a>
            </section>
        </div>

        <div id="section">
            <h2>About</h2>
            <section id="newsSection">
                <p id="newsText">
                    <b>Aversion Gaming</b> is a newly founded gaming organization.
                </p>
            </section>
        </div>
    </div>
    <footer>
        <p id="footerText">Copyright 2014 Aversion Gaming. Designed and
            coded by Robert Trainor.</p>
    </footer>
</body>
</html>


厌恶博弈

家
团队
接触
赞助商

消息
测试新闻邮报
这只是一篇测试新闻文章
最后，一个网站！
多亏了
@拉斯特罗
关于

厌恶游戏是一个新成立的游戏组织。

版权所有2014厌恶游戏。设计和
由罗伯特·特莱纳编码

当我在Windows 7笔记本电脑上加载页面时，它会显示徽标（从另一篇文章中获得，因此这只是一个示例）以及@media works中的所有格式代码。
当我将浏览器固定在同一台计算机的一侧时，较小窗口大小的代码不会生效

徽标从不显示，第二和第三个列表项的格式也没有填充

如果我在这里遗漏了什么或做错了什么，请告诉我。

我已经检查了你的代码，在我的macbook和safari上，它工作得很好（这意味着在我的浏览器中，源代码可以通过缩小/增大比例正确启动）

您是否检查过代码是否生效（它是否显示在您的源代码中），或者它只是看起来不像您希望的那样

你想在导航栏中添加填充物，在徽标旁边添加额外的空白，这样看起来就更整洁了？如果有的话，我的建议是：

当前，您的徽标未在移动版本中居中。这是第一点需要做一些调整：

.logo {
  background: url(http://i48.tinypic.com/2mob6nb.png);
  background-size: 140px 59px;
  width: 140px;
  height: 59px;
  position: absolute;
  top: 2%;
  left: 50%; /* center the left side of the logo */
  margin-left: -70px; /* go half of the logos width backwards, so that the logos center is centered */
}

然后您的

会收到额外的填充，但它们以文本居中，而不是以“块”居中。不能在左侧和右侧使用相同数量的空白。要实现这一点，下一个调整是在

上添加

宽度，如下所示：
nav li {
  display: inline-block;
  padding: 3% 2%;
  width: 50px; /* change this to whatever you want in px or % */
}

区别如下（先是之前，然后是之后）：


这能解决你的问题吗？如果您需要更多信息，请随时更正我对您问题的理解，或让我知道
致以最良好的祝愿，
玛丽安。你能发布其他css吗？这可能会对这种情况产生影响。因此，它是相关的。@MikeLoffland我用整个样式表和附带的HTML编辑了这篇文章？；）
nav li {
  display: inline-block;
  padding: 3% 2%;
  width: 50px; /* change this to whatever you want in px or % */
}