javascript - 导航栏可以在我的电脑上使用,但不能在互联网上使用
问题描述
我有一个网站的 2 个版本,一个是英文的,一个是法文的。英文版的导航栏在我的电脑上完美运行并在互联网上运行,所以当我在我的电脑上测试法语网站版本时,导航栏的工作方式与在互联网上运行时应该完全一样,但它卡在页面顶部,在哪里因为它假设在顶部下方约 5 厘米。这是html和css代码:
<div id="headerNav" class="navbar-collapse collapse float--right">
<!-- Header Nav Links Start -->
<ul class="header--nav-links nav">
<li class="dropdown">
<li><a href="index.html">Hébergement Web</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Forfaits</a>
<ul class="dropdown-menu">
<li><a href="hébergement-partagé.html">Hébergement Partagé</a></li>
<li><a href="wordpress.html">Hébergement WordPress</a></li>
<li><a href="vps-hébergement.html">Hébergement Cloud VPS</a></li>
</ul>
</li>
<li><a href="domaines.html">Noms de domaines</a></li>
<li><a href="coming-soon.html">Emails</a></li>
<li><a href="e-commerce.html">E-commerce</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Services</a>
<ul class="dropdown-menu">
<a href="à propos de.html" class="dropdown-toggle" data-
toggle="dropdown">à propos de</a>
<li><a href="services.html">Services</a></li>
<li><a href="à propos de.html">UTD Webhosting</a></li>
<li><a href="datacenter.html">Nos Datacenters</a></li>
</li>
<ul class="dropdown-menu">
<li><a href="coming-soon.html">Coming Soon</a></li>
<li><a href="404.html">404</a></li>
</ul>
</li>
</ul>
<li><a href="contact.php">Contact</a></li>
</ul>
<!-- Header Nav Links End -->
</div>
</div>
</nav>
<!-- Header Navbar End -->
</header>
CSS:
.header--navbar > .container {
position: relative;
}
.header--navbar .navbar-header {
float: none;
}
.header--cart-btn {
float: none;
position: absolute;
top: 1px;
right: 85px;
margin-left: 0;
}
.header--navbar .navbar-toggle {
display: block;
}
.header--navbar .navbar-collapse {
float: none;
display: none !important;
position: absolute;
left: 15px;
right: 15px;
max-height: -340px;
box-shadow: 0 3px 8px rgba(0, 0, 0, .085);
overflow: auto !important;
}
.header--navbar .navbar-collapse.collapsing,
.header--navbar .navbar-collapse.in {
display: block !important;
}
.header--nav-links {
margin-top: 12px;
margin-left: 0;
margin-right: 0;
color: #222;
background-color: #fff;
}
.header--nav-links > li {
float: none;
}
.header--nav-links > li > a {
display: block;
padding-left: 20px;
padding-right: 20px;
}
.header--nav-links > .dropdown > .dropdown-menu {
float: none;
position: relative;
margin-top: 0;
padding: 0;
box-shadow: none;
}
.header--nav-links > .dropdown > .dropdown-menu a {
padding-left: 30px;
padding-right: 30px;
}
.dropdown-menu .dropdown-menu {
float: none;
position: relative;
top: 0;
left: 0;
margin-left: 0;
padding: 0;
box-shadow: none;
}
.dropdown-menu .dropdown-toggle:before {
content: "\f107";
}
.header--nav-links > .dropdown > .dropdown-menu .dropdown-menu > li > a {
padding-left: 40px;
padding-right: 40px;
}
解决方案
您发布的代码中的很多标签(ul
, li
, 还有div
)没有正确关闭。浏览器会尝试以某种方式解释这一点,但不一定是您想要的方式,因此这可能是您的问题的原因。
我在下面的代码段中修复了那些未关闭的标签。很难检查您的 CSS,因为您发布的大多数 CSS 规则根本不适用于代码段,因为它们在其选择器中使用了类.header--nav-links
和类似的东西,而这些选择器不包含在您的 HTML 代码中。
不过,也许编辑后的 HTML 代码已经解决了您提到的显示问题。
.header--navbar>.container {
position: relative;
}
.header--navbar .navbar-header {
float: none;
}
.header--cart-btn {
float: none;
position: absolute;
top: 1px;
right: 85px;
margin-left: 0;
}
.header--navbar .navbar-toggle {
display: block;
}
.header--navbar .navbar-collapse {
float: none;
display: none !important;
position: absolute;
left: 15px;
right: 15px;
max-height: -340px;
box-shadow: 0 3px 8px rgba(0, 0, 0, .085);
overflow: auto !important;
}
.header--navbar .navbar-collapse.collapsing,
.header--navbar .navbar-collapse.in {
display: block !important;
}
.header--nav-links {
margin-top: 12px;
margin-left: 0;
margin-right: 0;
color: #222;
background-color: #fff;
}
.header--nav-links>li {
float: none;
}
.header--nav-links>li>a {
display: block;
padding-left: 20px;
padding-right: 20px;
}
.header--nav-links>.dropdown>.dropdown-menu {
float: none;
position: relative;
margin-top: 0;
padding: 0;
box-shadow: none;
}
.header--nav-links>.dropdown>.dropdown-menu a {
padding-left: 30px;
padding-right: 30px;
}
.dropdown-menu .dropdown-menu {
float: none;
position: relative;
top: 0;
left: 0;
margin-left: 0;
padding: 0;
box-shadow: none;
}
.dropdown-menu .dropdown-toggle:before {
content: "\f107";
}
.header--nav-links>.dropdown>.dropdown-menu .dropdown-menu>li>a {
padding-left: 40px;
padding-right: 40px;
}
<div id="headerNav" class="navbar-collapse collapse float--right">
<!-- Header Nav Links Start -->
<ul class="header--nav-links nav">
<li class="dropdown"><a href="index.html">Hébergement Web</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Forfaits</a>
<ul class="dropdown-menu">
<li><a href="hébergement-partagé.html">Hébergement Partagé</a></li>
<li><a href="wordpress.html">Hébergement WordPress</a></li>
<li><a href="vps-hébergement.html">Hébergement Cloud VPS</a></li>
</ul>
</li>
<li><a href="domaines.html">Noms de domaines</a></li>
<li><a href="coming-soon.html">Emails</a></li>
<li><a href="e-commerce.html">E-commerce</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Services</a>
<ul class="dropdown-menu">
<a href="à propos de.html" class="dropdown-toggle" data- toggle="dropdown">à propos de</a>
<li><a href="services.html">Services</a></li>
<li><a href="à propos de.html">UTD Webhosting</a></li>
<li><a href="datacenter.html">Nos Datacenters</a></li>
</ul>
<ul class="dropdown-menu">
<li><a href="coming-soon.html">Coming Soon</a></li>
<li><a href="404.html">404</a></li>
</ul>
</li>
<li><a href="contact.php">Contact</a></li>
</ul>
<!-- Header Nav Links End -->
</div>
<!-- Header Navbar End -->
推荐阅读
- objective-c - 如何在同时禁用其他两个的同时启用 UISwitch
- oracle - 从 Toad 上的命令行执行模式差异时过滤器查询的问题
- java - .view.InflateException:二进制 XML 文件第 10 行:二进制 XML 文件第 10 行:膨胀类 com.iammert.library.readablebottombar.Readable 时出错
- java - Android Studio 4.2 布局呈现错误
- compilation - 在 /usr/local/lib 中找不到共享库
- wordpress - 联系表格 7 未使用 Ajax 提交
- python - 在 Python 中处理路径细微差别的项目结构
- flutter - 颤振范围错误:无效值:有效值范围为空:0
- angular - 如何在 Angular 2+ 中触发(更改)事件
- javascript - 在 React 中使用 map 方法过滤结果