控制组UI问题？

Question

我需要100％的控制组，以便在任何类型的移动屏幕上都应该填满全屏。我已经给了css属性，但它不起作用，我的代码如下，

  <div data-role="controlgroup" data-type="horizontal">
  <a href="#" id="SMS" data-role="button" onClick='goToSms()'>SMS</a>
  <a href="#" id="EMAIL" data-role="button" onClick='gomail()'>Send Email</a>
  <a href="#" id="Save" data-role="button" onClick='goToSave()'>Save Location</a>
   </div>

CSS：

 .ui-controlgroup-controls {width: 100% !important;}
            #SMS {width:33% !important;}
            #EMAIL {width:33% !important;}
            #Save {width:34% !important;}

对于上面的代码我是这样的，

我需要它在同一行，需要适合所有移动屏幕

Answer 1

如果你真的想使用水平控制组，你只需要添加CSS box-sizing：border-box;控制使33％包括所有边界，边距等：

.boxsizing{
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

<div data-role="controlgroup" data-type="horizontal" class="boxsizing">
    <a href="#" id="SMS" data-role="button" onClick='goToSms()' class="boxsizing">SMS</a>
    <a href="#" id="EMAIL" data-role="button" onClick='gomail()' class="boxsizing">Send Email</a>
    <a href="#" id="Save" data-role="button" onClick='goToSave()' class="boxsizing">Save Location</a>
</div>

  

正在使用 DEMO

但是，正如用户经常指出的那样， NAVBAR 小部件可能是更好的选择......