javascript - jQuery移动多行按钮覆盖问题

我正在使用Phonegap和JQuery mobile创建一个使用按钮的应用程序，该按钮的内容（标题）是通过ajax请求获取的，并且可能很长，因此我想使用多行按钮。我搜索并找到了一种使用以下CSS的方法：

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

但是我无法正常工作。

我试图将其放在页面顶部的样式标签之间，然后使用style =''将其放置在按钮本身的html代码内。我还尝试将这段代码放在一个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似乎不起作用，因为它很简单，但是也许我错过了一些明显的东西。

在此先感谢您的帮助。

最佳答案

没有jsfiddle或示例，很难看到发生了什么，但是为什么不尝试使用：

display: block;

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

从事物的外观来看，.ui-btn-inner指的是按钮的内部，并且代码中的超链接似乎没有分配一个类。

关于javascript - jQuery移动多行按钮覆盖问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18486829/