Question

这是我的相关css（只是电话版本。与电脑版本的区别是＆＃34;（最大宽度：1223px）＆＃34;变成＆＃34;（最小宽度：1224px）＆＃34）：

* {
    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笔记本电脑上加载页面时，它显示了徽标（从另一篇文章中获取，因此只是一个示例）和@media中的所有格式代码都有效。
当我将浏览器固定在同一台计算机上的一侧时，较小窗口大小的代码不会启动。

徽标永远不会显示，第二和第三个列表项的格式不会得到填充。

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

Answer 1

我已经检查了你的代码，并在我的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 */
}

然后你的<li>收到额外的填充，但它们以文本为中心，而不是＆＃34;阻止＆＃34;。您可以在左侧和右侧使用相同数量的空白区域。为实现此目的，下一个调整是向width添加<li>，如下所示：

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

差异看起来像这样（先前，之后）：

before after

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

祝你好运，玛丽安。

当屏幕尺寸较小时，nth-child不会归因于此

1 个答案: