JQuery мобильный дополнительный интервал в нижней части div

Question

Получение нежелательных интервалов в нижней части div.

Желание:

 - - - - - - - - - - - - - - - - - - -
|                 |                    |
|    Button1      |      Button2       |
|                 |                    |
 - - - - - - - - - - - - - - - - - - - 
| Title                                |
 - - - - - - - - - - - - - - - - - - - 
|                                      |
|  Page info....                       |

Но я получаю

 - - - - - - - - - - - - - - - - - - -
|                 |                    |
|    Button1      |      Button2       |
|                 |                    |
 - - - - - - - - - - - - - - - - - - - 
5px gap
 - - - - - - - - - - - - - - - - - - - 
| Title                                |
 - - - - - - - - - - - - - - - - - - -  
|                                      |
|  Page info....                       |

Примечание: что я хотел стилизоватьфон, поэтому я помещаю все перед содержимым div.

<div data-role="page">
<style>
.topWrapper{
  width:100%;
  padding:0;
  margin:0;
  display:inline-block;
}
.topWrapper a{
  width:50%;
  padding-top:10px;
  padding-bottom:10px;
  float:left;
}
.myHr{
  width:100%;
  margin:0;
  padding:0;
  line-height:1em;
  font-size:1em;
}
.pageInfo{
  width:100%;
  margin:0;
  padding:0;
}

</style>
<div data-role="header">
<h1>Title</h1>
<a data-role="back" href="/app/Post">Back</a>
</div>
<div class="topWrapper">
    <a href="#" class="active">Button1</a>
    <a href="#">Button2</a>
</div>
<div class="myHr">Title</div>
<div class="pageInfo">...</div>
<div data-role="content"></div>
</div>

Answer 1

Я думаю, вам нужно переопределить значение по умолчанию margin на button s.

Так что ваш CSS должен быть

.topWrapper a{
  width:45%;
  padding-top:10px;
  padding-bottom:10px;
  float:left;
  margin-bottom:0 !important;  //ADD THIS  
}

Я также уменьшил width, чтобыНет проблем с float.

Красный border на title можно удалить.Это там, чтобы показать разницу.(Если вы удалите margin-bottom:0 !important; и снова запустите скрипку, вы увидите разрыв 5px)

http://jsfiddle.net/jasongennaro/GyeMd/1/

Answer 2

Live Пример:

• http://jsfiddle.net/8HWqG/27/

HTML:

<div data-role="page" id="home">
    <div data-role="header">
        <h1>Title</h1>
        <a data-role="back" href="/app/Post">Back</a>
    </div>
    <div data-inline="true">
        <a href="#" data-role="button" data-inline="true" class="active buttonWidth">Button1</a>
        <a href="#" data-role="button" data-inline="true" class="buttonWidth buttonRight">Button2</a>
    </div>
    <div class="myHr">Title</div>
    <div class="pageInfo">...</div>
    <div data-role="content"></div>
</div>

CSS:

.buttonWidth {
    width:48%; /* make buttons span longer, increase the width but keep it 48% or below */
    /* Optional Margin/Padding for Buttons */
    margin-top: 1px;
    padding-top:1px;
}

.buttonRight {
    float:right;
}

.myHr{
    width:100%;
    margin:0;
    margin-top: -6px;
    padding:0;
    padding-top: -6px;
    line-height:1em;
    font-size:1em;
}
.pageInfo{
    width:100%;
    margin:0;
    padding:0;
}