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。

所以你的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

直播示例：

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

div底部的jquery移动额外间距

2 个答案: