div底部的jquery mobile额外间距答案

【问题标题】：jquery mobile extra spacing on bottom of divdiv底部的jquery mobile额外间距
【发布时间】：2011-06-30 18:23:13
【问题描述】：

在 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>

【问题讨论】：

标签： jquery css jquery-mobile

【解决方案1】：

我认为您需要覆盖buttons 上的默认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; 并再次运行小提琴，您将看到 5px 间隙）

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

【讨论】：

【解决方案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;
}

【讨论】：