我正在尝试开发一个 Jquery 移动应用程序，但遇到了一个问题，我无法在网络上找到答案。该应用程序有一个带有 4 个按钮的导航栏和一个用于保存图像链接的 2 列网格。问题是当我向 block 元素添加顶部填充时，导航栏中左侧的 2 个按钮向下移动。有人可以帮忙吗!谢谢。
html文件:
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<title>Citrus IPM Test_1</title>
<link rel="stylesheet" href="../download18Dec13/jquery.mobile-1.3.2.min.css" />
<script src="../download18Dec13/jquery-1.9.1.min.js"></script>
<script src="../download18Dec13/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="./css/my_style.css"/>
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
<div data-role="navbar">
<ul>
<li><a href=# class="ui-btn-active ui-state- persist">Insects</a></li>
<li><a href=# > Diseases</a></li>
<li><a href=# >Inspection</a></li>
<li><a href=# >Biosecurity</a></li>
</ul>
</div>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="frw.html"> <img href="#" src="./img/frw_main.png" alt="FRW"> <br>Fuller's rose weevil</a>
</div>
<div class="ui-block-b">
<a href="lbam.html"> <img href="#" src="./img/frw_main.png" alt="LBAM"><br>Light brown apple moth</a>
</div>
<div class="ui-block-a">
<a href="crs.html"> <img href="#" src="./img/frw_main.png" alt="CRS"><br>California red scale</a>
</div>
<div class="ui-block-b">
<a href="cgw.html"> <img href="#" src="./img/frw_main.png" alt="CGW"><br>Citrus gall wasp</a>
</div>
</div>
</div>
<div data-role="footer" data-id="footer.home" data-position="fixed" data-theme="a">
<div data-role=navbar>
<ul>
<li><a href=# data-icon=arrow-l></a></li>
<li><a href=# data-icon=refresh></a></li>
<li><a href=# data-icon=arrow-r></a></li>
</ul>
</div>
</div>
</body>
</html>
CSS file:
.ui-navbar .ui-btn-text {
font-family: 'Source Sans Pro', sans-serif;
font-size:10px;
padding:0px; important!
}
.ui-block-a{
font-family: 'Source Sans Pro', sans-serif;
font-size:9px;
//height:70px;
//width:50px;
display:block;
padding:50px 0px 0px 0px;
}
.ui-block-b{
font-family: 'Source Sans Pro', sans-serif;
font-size:9px;
//height:70px;
//width:50px;
display:block;
padding:50px 0px 0px 0px;
}
header{height:50px;width:auto;}
img{
width:auto;
//height:50px;
}
最佳答案
正如你所说。这是因为您在前两个 <li> 中添加了 padding-top .. 所以元素类 .ui-block-b和 .ui-block-b高度变大.. 在元素的边框内添加填充，从而使 <a>其中包含的元素下降。
[更新] 我注意到在你的 CSS 中你定义了一个
.ui-block-b{
font-family: 'Source Sans Pro', sans-serif;
font-size:9px;
//height:70px;
//width:50px;
display:block;
padding:50px 0px 0px 0px;
}
而且我认为这个类已经被 jquery 使用了。所以你添加这个padding:50px 0px 0px 0px;的事实将反射(reflect) jquery 标记为 class = ui-block-b 的那些.
要了解我的观点，请尝试使用 firebug 检查 DOM，或者如果您使用的是谷歌浏览器，请按 F12。你会看到所有<li>在<div data-role="navbar">下现在有 class = ui-block-<*> .所以他们受到影响。如果您想用库中的现有类覆盖页面的外观，我的建议是尝试添加另一个类名。
像这样class = "ui-block-b my_class_name"
并通过为 my_class_name 类定义样式来改变 ui-block-b 的外观。这样其他使用 ui-block-b 类的元素就不会受到影响。
关于jquery - <head> 中的导航栏按钮随着 <body> 中的网格填充移动(向下扩展)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20650630/