草庐IT

html - 从 "Wrapping"阻止 CSS 水平下拉菜单

coder 2023-08-12 原文

让我感到沮丧的是，一旦重新调整浏览器窗口的大小，这个漂亮的小菜单就会换行。如何防止换行并使其保持固定状态，无论窗口是否调整大小？

#menu {
  border-top: 1px solid #FFF;
  padding: 0;
  margin: 0;
  position: fixed;
  top: 30px;
  left: 0px;
  font-size: 8pt;
  width: 100%;
}

#menu ul {
  padding: 0;
  margin: 0;
}

#menu li {
  position: relative;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

#menu li a {
  width: 120px;
  height: 20px;
  display: block;
  text-decoration: none;
  line-height: 20px;
  background-color: #A9BBD3;
  color: #FFF;
}

#menu li a:hover {
  background-color: #446087;
}

#menu ul ul {
  position: absolute;
  top: 21px;
  visibility: hidden;
}

#menu ul ul li a {
  width: 115px;
  padding-left: 5px;
}

#menu ul li:hover ul {
  visibility: visible;
}

#menu>ul>li>a {
  text-align: center;
}

#menu>ul>li>a:hover {
  border-bottom: 1px solid #FFF;
}
<body>
  <div id="menu">
    <ul>
      <li><a href="#nogo">File</a>
        <ul>
          <li><a href="#nogo">Save</a></li>
          <li><a href="#nogo">Save & Exit</a></li>
          <li><a href="#nogo">Exit</a></li>
        </ul>
      </li>
      <li><a href="#nogo">Edit</a>
        <ul>
          <li><a href="#nogo">Add</a></li>
          <li><a href="#nogo">Delete</a></li>
          <li><a href="#nogo">Clear Form</a></li>
        </ul>
      </li>
      <li><a href="#nogo">Reports</a>
        <ul>
          <li><a href="#nogo">Export to Excel</a></li>
          <li><a href="#nogo">Export to HTML</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>

最佳答案

添加以下 CSS:

#menu > ul { 
    white-space: nowrap;
}

#menu > ul > li {
  display: inline-block;
  float: none;
  margin: 0 -3px 0 0;
}

float: none 需要覆盖规则 #menu li { float: left; }，这会导致父 ul 的 white-space: nowrap 规则被忽略。

display: inline-block 为列表项生成内联布局，但仍然允许它们在大小和定位方面被视为 block 元素。

需要否定 margin-right 来覆盖 HTML 源代码中换行符到单个空格的默认转换；没有它，您的顶级菜单项之间将有空格。

display: inline-block 在 IE7 中无法正常工作。描述了修复 here :

to get inline-block working for any element in Internet Explorer simply add "zoom:1; *display: inline; _height: 30px;" to the end of that elements style oh and yes change the height to whatever you need.

关于html - 从 "Wrapping"阻止 CSS 水平下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13092143/

ampWrappinggtltcodehtmlcss

有关html - 从 "Wrapping"阻止 CSS 水平下拉菜单的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  3. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  4. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  5. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  6. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  7. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  8. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  9. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  10. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

随机推荐