草庐IT

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

coder 2023-09-29 原文

我为宽度小于等于 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-menumargin: 0;

希望这有帮助:)

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

有关jquery - 删除媒体查询导航栏中的所有空格的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake,如果我把所有东西都放到Rakefile中,它会很大并且很难读取/找到东西,所以我试着将每个命名空间放在lib/rake中它自己的文件中,我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题,但没有任务。我现在只有一个.rake文件作为测试,名为“servers.rake”,它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  3. ruby-on-rails - Ruby net/ldap 模块中的内存泄漏 - 2

    作为我的Rails应用程序的一部分,我编写了一个小导入程序,它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是,与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存,我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关,因为当我删除对LDAP内容的调用时,内存使用情况会很好地稳定下来。此外,不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray,它们都是LDAP库的一部分。当我运行导入时,内存使用量最终达到超过1GB的峰值。如果问题存在,我需要找到一些方法来更正我的代

  4. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情? 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中,使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件,我们在StackOverflow上找到一个类似的问题

  5. ruby - ECONNRESET (Whois::ConnectionError) - 尝试在 Ruby 中查询 Whois 时出错 - 2

    我正在用Ruby编写一个简单的程序来检查域列表是否被占用。基本上它循环遍历列表,并使用以下函数进行检查。require'rubygems'require'whois'defcheck_domain(domain)c=Whois::Client.newc.query("google.com").available?end程序不断出错(即使我在google.com中进行硬编码),并打印以下消息。鉴于该程序非常简单,我已经没有什么想法了-有什么建议吗?/Library/Ruby/Gems/1.8/gems/whois-2.0.2/lib/whois/server/adapters/base.

  6. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何

  7. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据,就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理?我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题;这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML,但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中,将我的XML代码修改为

  8. ruby - 我可以使用 Ruby 从 CSV 中删除列吗? - 2

    查看Ruby的CSV库的文档,我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列,但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  9. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他,以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时,出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  10. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

随机推荐