JQuery移动多行按钮覆盖问题
JQuery mobile multiline button override issue
我正在使用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
指的是按钮的内部,而代码中的超链接似乎没有为其分配类。
相关文章:
- j查询验证器功能覆盖问题
- 关于覆盖本机DOM方法时的IE 10问题
- 覆盖在“背景大小:包含”上的响应式 DIV - 解决警报触发的问题
- Jquery 显示/隐藏常见问题解答,文本被覆盖
- JQuery移动多行按钮覆盖问题
- 我的插件上有 Css 覆盖问题
- 试图在PHP中重现一些JavaScript代码,变量覆盖问题,如何
- node.js中的继承问题:试图覆盖子类的原型时出现赋值错误
- 为什么我的innerHTML覆盖父类的样式属性?以及我该如何解决这个问题
- 试图覆盖全局变量时出现jQuery.post()作用域问题
- 手动引导和覆盖配置中的angular服务的问题
- 当注入javascript代码覆盖DOM中存在的代码时,会出现问题
- 原型覆盖范围问题
- jQuery覆盖悬停闪烁问题
- 本地存储覆盖问题
- 包装网格布局-边界/填充和覆盖的问题
- 修正了当位置动态给定时导航条覆盖内容的问题
- 扩展/覆盖 jQuery 对象文字方法 - 超出范围的问题
- Javascript / NodeJS:传入对象似乎覆盖了"self"-关闭问题
- 谷歌地图API v3圈覆盖问题