html - 当屏幕尺寸较小时，第 n 个 child 不归因

这是我的相关css(只是手机版，和电脑版的区别是“(max-width : 1223px)”变成了“(min-width : 1224px)”):

* {
    margin: 0;
    padding: 0;
}

body {
    background: #f5f5f5;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    margin: 0 0 100px; /* bottom = footer height */
}

html {
    position: relative;
    min-height: 100%;
}

a {
    text-decoration: none;
    color: #444;
}

a:hover {
    color: blue;
}

section {
    background: #fff;
    box-shadow: 0px 2px 2px #ebebeb;
}

header {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

nav li {
    display: inline-block;
    /*padding: 40px 30px 37px 30px;*/
    padding-top: 3%;
    padding-right: 2%;
    padding-bottom: 3%;
    padding-left: 2%;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 1223px) {
    .logo {
        /*background: url(logo.png) 50% 0 no-repeat;*/
        background: url(http://i48.tinypic.com/2mob6nb.png);
        background-size: 140px 59px;
        width: 140px;
        height: 59px;
        position: absolute;
        top: 2%;
        /* left: 405px; */
        left: 38%;
    }
    nav li:nth-child(2) {
        padding-right: 10%;
    }
    nav li:nth-child(3) {
        padding-left: 10%;
    }
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    .logo {
        /*background: url(logo.png) 50% 0 no-repeat;*/
        background: url(http://i48.tinypic.com/2mob6nb.png);
        background-size: 140px 59px;
        width: 140px;
        height: 59px;
        position: absolute;
        top: 20%;
        /* left: 405px; */
        left: 44%;
    }
    nav li:nth-child(2) {
        padding-right: 10%;
    }
    nav li:nth-child(3) {
        padding-left: 10%;
    }
}

#sectionLeft {
    width: 48%;
    float: left;
    padding: 5px;
}

#section {
    width: 48%;
    float: right;
    padding: 5px;
}

#sectionLeft h2, #section h2 {
    text-align: center;
}

#wrap {
    width: 100%;
    margin: 0 auto;
}

#newsSection {
    background: #fff;
    box-shadow: 0px 2px 2px #ebebeb;
    text-align: center;
    margin: 0px 0px 10px 0px;
}

#newsText {
    font-size: 12px;
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2.5%;
    width: 100%;
    text-align: center;
    background-color: #fff;
    -webkit-box-shadow: 0px -2px 2px 0px #ebebeb;
    -moz-box-shadow: 0px -2px 2px 0px #ebebeb;
    box-shadow: 0px -2px 2px 0px #ebebeb;
    bottom: 0;
}

#footerText {
    font-size: 10px;
}

和 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>

当我在我的 Windows 7 笔记本电脑上加载该页面时，它会显示 Logo (从另一篇文章中获取，所以它只是一个示例)和@media 中的所有格式代码。
当我将浏览器固定到同一台计算机的一侧时，较小窗口大小的代码不会启动。

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

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

最佳答案

我已经检查了你的代码，在我的 macbook 上使用 safari 它工作得很好(这意味着在我的浏览器中源代码通过缩小/放大正确启动)。

您是否检查过代码是否启动(它是否显示在您的源代码中)，或者它只是看起来不像您希望的那样？

我猜你想在导航中添加填充以在 Logo 旁边添加额外的空白，以便它看起来更整洁一点？如果是这样我的建议:

目前您的 Logo 未在移动版本中居中。这是做一点调整的第一点:

.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 */
}

然后是你的<li> s 接收额外的填充，但它们作为文本居中，而不是作为“ block ”。您不能在左侧和右侧使用相同数量的空白。为实现这一点，下一个调整是添加一个 width。给你的<li>就像这样:

nav li {
  display: inline-block;
  padding: 3% 2%;
  width: 50px; /* change this to whatever you want in px or % */
}

差异看起来像这样(先是之前，然后是之后):

before after

这能解决您的问题吗？如果您不能随意纠正我对您问题的理解，或者如果您需要更多信息，请告诉我。

最好的问候，玛丽安。

关于html - 当屏幕尺寸较小时，第 n 个 child 不归因，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27473187/

html - 当屏幕尺寸较小时，第 n 个 child 不归因

上一篇：css - ruby nokogiri - 在嵌套的 div 中抓取内容

下一篇：css - div 不会 float ，任何人都可以看到为什么吗？