JQuery手機多線按鈕覆蓋問題

我正在使用Phonegap和JQuery mobile創建一個應用程序，該應用程序使用的按鈕的內容（標題）通過ajax請求獲取並且可能相當長，所以我想要多行按鈕。我搜索並找到了使用以下css的方法：JQuery手機多線按鈕覆蓋問題

.ui-btn-inner{ 
    white-space: normal !important; 
}

但是我無法讓它工作。

我試圖把它放在我的頁面頭部的樣式標籤之間，然後在按鈕本身的html代碼中使用style =''。我也試圖把這段代碼放在一個css文件中，並將其鏈接到頁面，但它也不起作用，即使我把這個文件放在與我的HTML相同的文件夾中。

這裏是我JS的提取物，我創建的按鈕：

for (var i = 0; i < quizz.questionnaire[index_quest - 1].propositions.length; i++) { 
    if (quizz.questionnaire[index_quest - 1].fin) { 
     if (i + 1 == quizz.questionnaire[index_quest - 1].reponse) { 
      code_source += "<a href='pageFinQz.html' data-role='button' onclick='localStorage.localScore=++score'>"; 
      code_source += quizz.questionnaire[index_quest - 1].propositions[i]; 
      code_source += "</a><br/>"; 
     } else { 
      code_source += "<a href='pageFinQz.html' data-role='button'>"; 
      code_source += quizz.questionnaire[index_quest - 1].propositions[i]; 
      code_source += "</a><br/>"; 
     } 
    } else if (i + 1 == quizz.questionnaire[index_quest - 1].reponse) { 
     code_source += "<a href='#' data-role='button' onclick='mapQuestion(quizz, ++index_quest); localStorage.localScore=++score; return false' rel='external'>"; 
     code_source += quizz.questionnaire[index_quest - 1].propositions[i]; 
     code_source += "</a><br/>"; 
    } else { 
     code_source += "<a href='#' data-role='button' onclick='mapQuestion(quizz, ++index_quest); return false' rel='external'>"; 
     code_source += quizz.questionnaire[index_quest - 1].propositions[i]; 
     code_source += "</a><br/>"; 
    } 
}

我的HTML的頭：

<meta http-equiv="Content-Type" content="text-html" charset="UTF-8"/> 
<link rel="stylesheet" type="text/css" href="../lib/jqm/jquery.mobile-1.3.0.css" /> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<script type="text/javascript" src="../lib/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="../lib/cordova-2.4.0.js"></script> 
<script type="text/javascript" src="../lib/jqm/jquery.mobile-1.3.0.js"></script>

的style.css是比我的HTML的文件夾幷包含完全：

.ui-btn-inner{ 
    white-space: normal !important; 
}

我真的不明白爲什麼CSS似乎不工作，因爲它很簡單，B也許我錯過了一些明顯的東西。

在此先感謝您的幫助。

來源

2013-08-28 user2380462

按鈕呈現正常，並與jQM風格？如果是這樣，它應該沒有問題。無論如何，嘗試重寫'.ui-btn-text'。 – Omar

對不起，回覆晚了，謝謝你和西蒙的回答。在西蒙的提議之後，我嘗試了與他的建議有關的解決方案。我也試着像你說的奧馬爾那樣去做，但沒有一個能夠奏效，儘管按鈕的確是正確的樣式（但是如果太長，當然會被截斷）。 – user2380462

很難看到正在發生的事情沒有的jsfiddle或例子，但爲什麼不嘗試使用：

display: block;

直接鏈接元素上<a href="" style="display: block;"></a>

從事物.ui-btn-inner看起來是指按鈕內部和代碼中的超鏈接似乎沒有分配給它的類。

來源

2013-08-28 11:55:44

JQuery手機多線按鈕覆蓋問題

回答

相關問題