Question

我正在尝试开发一个Jquery移动应用程序，但遇到了一个我无法在网络上找到答案的问题。该应用程序有一个带有4个按钮的导航栏和一个用于保存图像链接的2列网格。问题是当我向块元素添加顶部填充时，导航栏中的左侧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;
}

Answer 1

就像你说的那样。这是因为你在前两个<li>添加了一个填充顶部..所以类.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;的事实将反映jquery标有class = ui-block-b的内容。

要看到我的观点，请尝试使用firebug检查DOM，或者如果您使用的是Google Chrome，请按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的其他元素不会受到影响。

导航中的导航按钮（向下扩展），带有网格填充

1 个答案: