Phonegap / Cordova CSS無法正常工作

Question

將我的應用程序轉移到phonegap時出現問題。 當我在瀏覽器中查看該網站時，它看起來很正常，按鈕與文本對齊（即使我將其調整為使用的平板電腦的大小），但當我在Phonegap上嘗試將其弄亂時也是如此。

看起來如何（stackoverflow不允許我上傳圖片，我的代表不是10） http://postimg.org/image/k49v615zz/

它看起來像什么
http://postimg.org/image/3t6g1a01p/

這兩個屏幕截圖均在瀏覽器中拍攝，但第一個

display: inline-flex !important;

就像您在prntscr上看到的一樣。 任何人都有類似的問題，知道如何解決嗎？

帶有問題按鈕的index.js部分

if(value.countable==true){
$detailList.append("
    <div  id='countable'>
        <span>"+value.detailName+"</span>
        <div data-role='controlgroup' data-type='horizontal' data-mini='true'>
            <button class='button detailRow qtyminus' id='minus' data-inline='true'>-</button>
            <input type='number' class='qty' min='0' inputmode='numeric' pattern='[0-9]*' name=detail."+value.detailId+" id="+value.detailId+" value="+ ((value.quantity == null)? + " 0": value.quantity) +" />
            <button class='button detailRow qtyplus' id='plus' data-inline='true'>+</button>
    </div>").trigger("create");
            }

CSS

#countable {
    width:100%;
}

#countable span {
    display: inline-block;
    width: 19em;
}

#countable div {
    display:inline-block;
}
.qty {
    position:relative;
    float:right;
    width: 9em;
    height: 3em;
    text-align: center;
}
input.qtyplus { 
    position:relative;
    float:right;
    width:2em; 
    height:2em;
}

input.qtyminus { 
    position:relative;
    float:right;
    width:2em; 
    height:2em;
}

.workerRow, .categoryRow, .taskRow {
    text-align: left;
}

Answer 1

在元素中使用％。

CSS

#countable span {
display: inline-block;
width: 60%;
}

.qty {
position:relative;
float:right;
width: 30%;
height: 3em;
text-align: center;
}

input.qtyplus { 
    position:relative;
    float:right;
    width:5%; 
    height:2em;
}

input.qtyminus { 
    position:relative;
    float:right;
    width:5%; 
    height:2em;
}

總元素間距為寬度的100％

但是嘗試在您的項目中使用它，我在所有項目中都使用了它，既簡單又有效

CSS

*, *:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    outline: none; 
}

.row:after {
        content: '';
        display: block;
        clear: both;
    }

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col-md-1 {
    width: 8.33333333%;
}

.col-md-2 {
    width: 16.66666666666667%;
}

.col-md-3 {
    width: 25%;
}

.col-md-4 {
    width: 33.33333333333333%;
}

.col-md-5 {
    width: 41.66666666666667%;
}

.col-md-6 {
    width: 50%;
}

.col-md-7 {
    width: 58.33333333333333%;
}

.col-md-8 {
    width: 66.66666666666667%;
}

.col-md-9 {
    width: 75%;
}

.col-md-10 {
    width: 83.33333333333333%;
}

.col-md-11 {
    width: 91.66666666666667%;
}

.col-md-12 {
    width: 100%;
}

如何使用，很簡單。 最大大小列為12。

例如

<div class="row">
   <div class="col-md-4"></div>
   <div class="col-md-4"></div>
   <div class="col-md-4"></div>
</div>

3列，尺寸為4 * 3 = 12

對你的問題使用這個

<div class="row">
   <div class="col-md-6"></div>
   <div class="col-md-1"></div>
   <div class="col-md-4"></div>
   <div class="col-md-1"></div>
</div>

網格系統是完美的，請使用此功能！ （小型演示http://jsfiddle.net/dieegov/Bk2gB/1/ ）