jquery - 删除媒体查询导航栏中的所有空格-6ren

jquery - 删除媒体查询导航栏中的所有空格

转载作者：可可西里更新时间：2023-11-01 06:01:40

24

4

我为宽度小于等于 414 像素的手机或 iPhone 6 加上“纵向”创建了一个媒体查询。我正在尝试制作一个下拉菜单，并且一切正常，只是导航栏没有移动。我左右给了它“margin:0,padding:0”，上面所有的都没有。如果你在“检查元素”中打开我的网站并选择“iPhone 6plus”版本，你会看到我的导航栏有很多空白，需要左对齐，所有白色边距和填充都被清除。有人可以告诉我如何将它带回左上角或 atlas 删除我的“iphone 6plus”或屏幕尺寸小于 414 的媒体查询中的所有空格。我的 html 将上传到这里，其余的将是在代码笔中。

演示: http://codepen.io/anon/pen/NpwbJp

屏幕截图 https://i.gyazo.com/605e7bb39ef78197fa24e2dcdab03427.png

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

             <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


        <link rel="stylesheet" type="text/css" href="magicstyle.css">

        </head>     
        <body>
            <!-- Section for Jobs Popup -->
            <div id="top-bar">
                  <a class="burger-nav"></a>
                    <ul id="nav-menu" class="testAgain">
                    <li id="job" class="testAgain">Job</li>
                    <li id="contact" class="testAgain">Contact</li>
                    <li id="press" class="testAgain">Press</li>
                    <li id="legal" class="testAgain">Legal</li>
                    <li id="support" class="testAgain">Support</li>


                </ul>
                    <!--<div id="nav-menu">
                    <span id="job">Jobs</span>
                    <span id="contact">Contact</span>
                    <span id="press">Press</span>
                    <span id="legal">Legal</span>
                    <span id="support">Support</span>

                    </div> -->


                </div>
                 <div id="job-popup">
            <div class="x-div1"><img class="x-icon1" id="fadeX1" src="Pictures/web%20x%20icon%20white.png" alt="Text alternative when image is not available"></div>
            <div id="job-content">

                <h1 id="jobWords"></h1>

                </div>

            </div>
            <!-- Section for Contact Popup -->
            <div id="contact-popup">
            <div class="x-div2"><img class="x-icon2" id="fadeX2" src="Pictures/web%20x%20icon%20white.png"></div>
            <div id="contact-content">

                <h1 id="contactWords"></h1>

                </div>

            </div>

            <!-- Section for Press Popu -->
             <div id="press-popup">
            <div class="x-div3"><img class="x-icon3" id="fadeX3" src="Pictures/web%20x%20icon%20white.png"></div>
            <div id="press-content">

                <h1 id="pressWords"></h1>

                </div>

            </div>

            <div id="legal-popup">
            <div class="x-div4"><img class="x-icon4" id="fadeX4" src="Pictures/web%20x%20icon%20white.png"></div>
            <div id="legal-content">

                <h1 id="legalWords"></h1>

                </div>

            </div>

            <div id="support-popup">
            <div class="x-div5"><img class="x-icon5" id="fadeX5" src="Pictures/web%20x%20icon%20white.png"></div>
            <div id="support-content">

                <h1 id="supportWords"></h1>

                </div>

            </div>




            <div id="container">


                <div id="name-div">
                <h1 id="name">Open Touch</h1>
                </div>
                <ul class="bubbles">

            <li id="firstCircle"></li>
            <li id="secondCircle"></li>
            <li id="thirdCircle"></li>
            <li id="fourthCircle"></li>
            <li id="fifthCircle"></li>
            <li id="sixthCircle"></li>



            </ul>



            </div>


        </body>





</html>

非常感谢此时的任何帮助。

最佳答案

问题出在您的 CSS 布局上。 @media 查询的顺序很重要。

所以这是你的

@media screen and (max-width:770px)

优先于

@media screen and (max-width: 414px)

只是因为它在代码中排在最后，在这种情况下 max-width: 414 也遵循 max-width 770px 的规则，因为任何低于 414px 的东西也是小于 770 像素。

所以只需更改 CSS 文件中代码的顺序即可。

在此之后，至于 id 标签上的边距 #nav-menu 放 margin: 0;

希望这有帮助:)

关于jquery - 删除媒体查询导航栏中的所有空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42843635/

24

4

0

文章推荐： ios - 按字母顺序获取联系人

文章推荐： ios - 需要按钮多次重复相同的功能

文章推荐： ios - 完美的 Swift3 Boing

java - 正则表达式 30 个数字 + 空格 + 连字符 + 空格 1 个数字
我有这个代码来查找这个模式:201409250200131738007947036000 - 1，在文本内 final String patternStr = "(\\d{
正则表达式删除方括号/空格
我正在尝试使用正则表达式清除一些用户输入，以删除 [ 和 ] 并删除任何大于 1 个空格的空格。但我似乎无法实现我想要的效果。这是我第一次使用正则表达式，所以我对如何写出来有点困惑。 (preg_re
Java正则表达式匹配单词+空格
我正在尝试构建这个简单的正则表达式来匹配 Java 中的单词+空格，但我在尝试解决它时感到困惑。该网站上有很多类似的示例，但答案大多给出了正则表达式本身，而没有解释它是如何构造的。我正在寻找的是形成
Python删除行之间的输入/空格
好吧，我已经阅读了很多建议如何消除多余空间的帖子，但无论出于何种原因，我似乎无法将这些建议应用到我的系统中，所以我在这里寻求您的帮助。这些是我代码的最后几行: for line in rli
javascript - 如何删除某些空的新行/空格
所以我正在我的测试存储上学习网页抓取，但我不确定如何正确地从“sizes”数组中删除空的新行。 const $ = cheerio.load(body) $('div.lis
javascript - 输入表单中不允许有空白字符/空格
这个问题已经有答案了: How to prevent invalid characters from being typed into input fields (8 个回答) 已关闭 9 年前。是
java - 忽略空格、空格
有人知道如何让扫描仪忽略空间吗？我想输入名字和第二个名字，但扫描仪不让我输入，我想保存全名 String name; System.out.print("Enter name: "); name =
VIM:空格/制表符缩进
这个问题在这里已经有了答案: Make Vim show ALL white spaces as a character (23 个回答) 关闭 8 年前。 VIM(使用 Solarized Dar
java - 流标记器、空格
我想使用 StreamTokenizer 从 java 文件中提取名称。我已将空格设置为逗号 inputTokenizer.whitespaceChars(',', ','); 但是，
Java:读取txt文件并将其保存在字符串数组中但不带反斜杠(空格)？
我正在使用此代码逐行读取 txt 文件。 // Open the file that is the first command line parameter FileInputStream fstre
Java 正则表达式 - 空格
我似乎无法弄清楚我需要的正则表达式。这就是我想要实现的目标: {ANY CHAR} + @javax.persistence.Column(name = "{ANY 30 CHARS}") + {AN
StyleCop 和 = 空格
我正在运行 StyleCop(顺便说一句，如果你想提供高质量的代码，我完全推荐它)... 我有这条线 [System.Xml.Serialization.XmlRootAttribute(Namesp
PhpStorm 在每次保存时删除制表符/空格
我刚刚更新到 PhpStorm 2016，我突然注意到，每次我按 Ctrl + S 保存文件时，它都会删除我在测试这段代码后按下以继续编写的空格/制表符。请帮忙，这对我来说很烦人，因为我在每一行代码
c - 输入名称(空格)
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 7 年前。 Improve th
c - 删除c程序中的制表符/空格
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果
路径中的 C# 空格
我已经看过几十个关于这个主题的问题和答案，但我仍然无法解决我的问题。我在我的代码中使用了一个外部 ffmpeg 转换器，我将文件路径作为参数传递，如下所示: OutputPackage oo = c
c - 空格、特殊字符和转义序列
谁能详细解释一下它们是什么以及它们之间的区别。提前致谢。最佳答案转义序列是代表其他内容的字符序列。例如(“\n” = 新行，“\?” = 问号等)。有关更详细的列表，请检查:https://en.
javascript - 从数组中删除换行符/空格
我无法从我的 javascript 文本中删除换行符。这是我正在处理的数据示例: 0: "Christian Pulisic" 1: "↵" 2: "From Wikipedia, the free
java - 从字符串Java的开头和结尾删除新行/空格
我有一个问题 - 我似乎无法从字符串的开头/结尾删除新行/空格。我在正则表达式的开头和结尾使用 \s ，甚至在获取字符串后使用 .trim() ，但无济于事。 public void extractI
用于超链接的变量中的 PHP 空格
我是 php 的新手，我正在尝试将一系列变量添加到 html 超链接中。但是，任何返回空格的变量都会弄乱超链接。 Grants Test

首页

博学

6Ren·AI

商城

jquery - 删除媒体查询导航栏中的所有空格