jQuery移动端在div底部出现额外的间距问题

Question

获取 div 底部不需要的间距。

期望：

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

但是我正在学习

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

注意：我想要给背景添加样式，所以将所有内容都放在了content 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>

- pcasa

Answer 1

我认为你需要覆盖 button 上的默认 margin。

所以你的 CSS 应该是：

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

我还减小了 width，这样就不会出现 float 的问题了。

title 上的红色 border 可以删除。它只是为了展示差异。(如果您移除 margin-bottom:0 !important; 并重新运行 fiddle，您将看到 5px 的间距)

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

- Jason Gennaro

Answer 2

实时示例：

• 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;
}

- Phill Pafford