Кнопки Navbar в <head> перемещаются (расширяются вниз) с отступом сетки в <body>

Question

Кнопки Navbar в <head> перемещаются (расширяются вниз) с отступом сетки в <body>

0

Я пытаюсь разработать мобильное приложение 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;
}

user3113859 18 дек. 2013, в 07:25

Источник

Теги:

jquery

css

1 ответ

Ещё вопросы

KiX Ortillan · Answer 1 · 2013-12-18T05-11-00.000Z

Как и вы сказали. Это связано с тем, что вы добавляете верхнюю часть для двух первых <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, не будут затронуты.