当我将 padding-left
添加到类 ui-block-b
时,它的副作用是我的固定 navbar
得到了这个填充同样,我不想要。我只想将填充应用到我的 ui-gid-a
中的 ui-block-b
。所以我尝试添加一个新类 ui-block-b-own
但我没有在 ui-block-b
中获得填充:
CSS:
.ui-block-b-own {
padding-left: 10px !important
}
这是代码:
function showDetails(index){
var suchresultat = search(); // gets either rezepte or result
$("#rezept h1").html(suchresultat[index].name);
var inhalt = "";
var p = suchresultat[index].portionen;
var m = suchresultat[index].menge;
var z = suchresultat[index].zubereitung;
var textM = "";
var textZ = "";
for( var i = 0; i < m.length; i++ )
{
textM += "<br />" + m[i];
}
for( var i = 0; i < z.length; i++ )
{
textZ += "<br />" + z[i];
}
var por;
if (p == 1){
por = "Portion:";
}
else {
por = "Portionen:";
}
inhalt += '<section class="ui-grid-a">';
inhalt += '<!-- Row1 -->';
inhalt += '<div class="ui-block-a"><strong>Zutaten für<br>'+ p + ' '+ por +'</strong></div>';
inhalt += '<div class="ui-block-b"><strong>Zubereitung:</strong></div>';
inhalt += '<!-- Row2 -->';
inhalt += '<div class="ui-block-a">' + textM + '</div>';
inhalt += '<div class="ui-block-b ui-block-b-own"' + textZ + '</div>';
inhalt += '</section>';
$("#rezeptInhalt").html(inhalt); // füllt page id rezept content
$.mobile.changePage($("#rezept"));
知道我做错了什么吗?
最佳答案
这看起来像是在生成无效的 HTML。在您通过 textZ
插入内容之前,相关元素缺少结束 >
。因此,CSS 将无法正确应用,因为浏览器可能会猜测节点的正确文本内容应该是什么。
inhalt += '<div class="ui-block-b ui-block-b-own">' + textZ + '</div>';
//----------------------------------------------^^^^
关于javascript - 向 ui-block-b 添加填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13441018/