Я пытаюсь разработать мобильное приложение JQuery, но столкнулся с проблемой, которую я не смог найти в Интернете. Приложение имеет навигационную панель с 4 кнопками и сеткой с двумя столбцами для хранения ссылок на изображения. Проблема заключается в том, что когда я добавляю верхнее дополнение к элементам блока, левые 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 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>
.. поэтому элементы с классом .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
.
Чтобы увидеть мою точку, попробуйте проверить DOM с помощью Firebug или нажатием F12, если вы используете Google Chrome. вы увидите, что все <li>
под <div data-role="navbar">
теперь имеют class= ui-block-<*>
. поэтому они становятся затронутыми. Мое предложение пытается добавить другое имя класса, если вы хотите переопределить внешний вид вашей страницы с существующими классами из библиотеки.
Подобно этому class= "ui-block-b my_class_name"
и измените внешний вид ui-block-b, указав стили для класса my_class_name. Так что другие элементы, использующие класс ui-block-b, не будут затронуты.