jQuery导航栏出现在内容宽度之外 [英] jQuery nav bars appearing outside of the content width
问题描述
我有一个非常烦人的问题，即持久性jQuery导航栏出现在内容宽度之外，比页面上其余内容宽得多，这是我预览HTML时看到的:
I have a really annoying issue whereby the persistent jQuery nav bars are appearing outside of the content width, much wider than the rest of the content on the page, this is what I see when I preview my HTML :
使用<head>中的<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />，应将内容宽度设置为设备宽度，该宽度用于页眉和文本元素，而不用于导航栏.
Using <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /> in the <head> it should set the content width to be the device width, which it has for the header and text element, but not for the nav bars.
这是我上面完整的HTML文件:
This is my full HTML file for the above :
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/SmartConf.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
</head>
<body onload="WL.Client.init({})" id="content">
<div data-role="page">
<div data-role="header">
<h1>Home</h1>
</div><!-- /header -->
<div data-role="content">
<p>Home</p>
</div><!-- /content -->
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="tweets.html">Tweets</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<script src="js/SmartConf.js"></script>
<script src="js/messages.js"></script>
<script src="js/auth.js"></script>
<script src="js/jquery/jquery.mobile-1.1.1.js"></script>
</body>
</html>
有没有一种方法可以将导航栏压缩到主内容窗口中?
Is there a way of squeezing the nav bars into the main content window?
谢谢
编辑:
如果我从body标记中放下id="content"，那么宽度可以正确调整，但是这样做会导致Worklight启动中出现各种故障，因为它引用了内容" ID标记，因此，我相信主体和div都在争夺content ...
If I drop id="content" from the body tag, then the width adjusts correctly, however by doing so I get various failures in the Worklight startup, as its referencing the "content" ID tag, therefore I believe there is a conflict as both the body and the div are competing for the ID of content...
推荐答案
删除这两行:
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/SmartConf.css" />
这篇关于jQuery导航栏出现在内容宽度之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
