响应网格中的两个按钮之间的保证金(jquery mobile)

时间:2015-06-30 15:22:58

标签: javascript jquery css jquery-mobile grid

我只想在jquery mobile中使用响应式网格在两个按钮之间留出空格,而我不想在按钮的左侧和右侧使用边距。我不知道如何。

This jsfiddle显示我想要的东西:当有水平空间时,左侧有一个按钮,右侧有另一个按钮,中间有一个空格。左按钮左侧没有边距,右按钮右侧没有边距:完美!正是我想要的。

enter image description here

这就是我实现这个结果的方法:

.ui-grid-a [class*=ui-block-a]>.ui-btn { margin:0 10px 0 0; }
.ui-grid-a [class*=ui-block-b]>.ui-btn { margin:0 0 0 10px; }

但是......当我们挤压水平空间使其响应时,我将在第一个按钮的正确尺寸上有一个空格,在第二个按钮的左侧有一个空格(左边和右边缘) css,当然):

enter image description here

问题是:如何在按钮之间留出空间(如第一张图像),并在响应时没有这个空格(第二张图片中的问题)?在两个按钮之间使用某种“垫片”?另一个div?我真的尝试过很多东西......

1 个答案:

答案 0 :(得分:0)

使用此CSS:

@media (max-width:800px) {
  .ui-grid-a [class*=ui-block-]>.ui-btn {
    margin: 0;
  }
}

小提琴:http://jsfiddle.net/yu4pem1g/3/