Question

我的标题有以下html。

<header id="header">
            <img src="images/logo.png"/>
            <div class="container">

                <nav id="nav">
                    <ul>
                        <li>
                            <a href="/">Home</a>
                        </li>
                        <li>
                            <a href="about">About Me</a>
                        </li>
                        <li>
                            <a href="pricing">Pricing</a>
                        </li>
                        <li>
                            <a href="sessions">Sessions</a>
                        </li>
                        <li>
                            <a href="signup">Sign Up</a>
                        </li>
                        <li>
                            <a href="contact">Contact</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>

我的CSS有以下内容：

    img .header-basic{
height:30px;
}


#content {
    margin: 5px;
    margin-top:00px;
}
#logo {
    height: 100px;
    top: 0px;
    position: absolute;
    left: 75px;
}
#content img{
    float:right;
}


/*Header*/
#header img {
    width: 450px;
    height: auto;
    display:block;
    margin: 0 auto;
}

@media only screen and (max-width:800px) {
    #header img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    #nav ul {
        text-align: center;
    }

        #nav ul li {
            display: inline;
            text-decoration: none;
            margin-left: 15px;
            margin-right: 15px;
            text-align: center;
            font-family: 'Verdana';
        }

            #nav ul li a {
                text-decoration: none;
                color: black;
                font-size: 20px;
                font-family: 'Verdana';
            }
}
    #nav ul {
        text-align: center;
    }

        #nav ul li {
            display: inline;
            text-decoration: none;
            margin-left: 20px;
            margin-right: 20px;
            text-align: center;
            font-family: 'Verdana';
        }

            #nav ul li a {
                text-decoration: none;
                color: black;
                font-size: 20px;
                font-family: 'Verdana';
            }

    /*End Header*/

我的媒体查询激活以使图像变小但文本保持不变。我希望减少保证金以使所有导航保持在一条线上。我在Visual Studio中进行编码并在Chrome 55.0.2883.87 m（64位）中进行测试。

Answer 1

你可以减少边距和 font-size ，使它们在一行中生成如下：

    img .header-basic{
height:30px;
}


#content {
    margin: 5px;
    margin-top:00px;
}
#logo {
    height: 100px;
    top: 0px;
    position: absolute;
    left: 75px;
}
#content img{
    float:right;
}


/*Header*/
#header img {
    width: 450px;
    height: auto;
    display:block;
    margin: 0 auto;
}
 #nav ul {
        text-align: center;
    }

        #nav ul li {
            display: inline;
            text-decoration: none;
            margin-left: 15px;
            margin-right: 15px;
            text-align: center;
            font-family: 'Verdana';
        }

            #nav ul li a {
                text-decoration: none;
                color: black;
                font-size: 20px;
                font-family: 'Verdana';
            }

@media only screen and (max-width:800px) {
    #header img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

   
    #nav ul {
        text-align: center;
    }

        #nav ul li {
            display: inline;
            text-decoration: none;
            margin-left: 5px;
            margin-right: 5px;
            text-align: center;
            font-family: 'Verdana';
        }

            #nav ul li a {
                text-decoration: none;
                color: black;
                font-size: 15px;
                font-family: 'Verdana';
                
            }
}

@media only screen and (max-width:468px) {
  
  #nav ul li {
            
            margin-left: 1px;
            margin-right: 1px;
      
        }

            #nav ul li a {
                font-size: 10px;
}
}
    /*End Header*/

<header id="header">
            <img src="images/logo.png"/>
            <div class="container">

                <nav id="nav">
                    <ul>
                        <li>
                            <a href="/">Home</a>
                        </li>
                        <li>
                            <a href="about">About Me</a>
                        </li>
                        <li>
                            <a href="pricing">Pricing</a>
                        </li>
                        <li>
                            <a href="sessions">Sessions</a>
                        </li>
                        <li>
                            <a href="signup">Sign Up</a>
                        </li>
                        <li>
                            <a href="contact">Contact</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>

无法使用媒体查询编辑文本

1 个答案: