Question

我试图添加一个包含文字＆＃39; Achievement Unlocked＆＃39;出现在网页上，其中2个单词位于不同的行上。我尝试了很多东西，但它们一直出现在同一条线上。

我的代码看起来像这样：

var award = document.createElement('div');  // Holds text
var text = document.createElement('h3');    // contains 'Achievement'
var text2 = document.createElement('h3');   // contains 'Unlocked'
$(text).text('Achievement').css({
    'color':'#660029',
    'text-align':'center',
    'vertical-align':'middle',
    'display':'table-cell',
    'font-size':'150%'
});
$(text2).text('Unlocked!').css({
    'color':'#660029',
    'text-align':'center',
    'vertical-align':'middle',
    'display':'table-cell',
    'font-size':'150%'
});
$(award).css({
    'height':'200px',
    'width':'200px',
    'background-color':'#cce6ff',
    'position':'fixed',
    'bottom':'20%',
    'left':'50%',
    'transform':'translate(-50%, 0%)',
    'border':'5px solid #004080',
    'border-radius':'100%',
    'display':'table'
}).fadeIn(500);
$(award).append(text, text2);

有没有人知道如何在div中间一个接一个地将它们分开？

Answer 1

只需添加此行document.body.appendChild(award);

即可

https://jsfiddle.net/ytkkbnp1/2/

 var award = document.createElement('div');  // Holds text
var text = document.createElement('h3');    // contains 'Achievement'
var text2 = document.createElement('h3');   // contains 'Unlocked'
$(text).text('Achievement').css({
    'color':'#660029',
    'text-align':'center',
    'vertical-align':'bottom',
    'display':'table-cell',
    'font-size':'150%'
});
$(text2).text('Unlocked!').css({
    'color':'#660029',
    'text-align':'center',
    'vertical-align':'middle',
    'display':'table-row',
    'font-size':'150%'
});
$(award).css({
    'height':'200px',
    'width':'200px',
    'background-color':'#cce6ff',
    'position':'fixed',
    'bottom':'20%',
    'left':'50%',
    'transform':'translate(-50%, 0%)',
    'border':'5px solid #004080',
    'border-radius':'100%',
    'display':'table'
})
document.body.appendChild(award);
$(award).append(text, text2);

Answer 2

使用这些样式代替彼此制作主题

$(text).text('Achievement').css({
        'color': '#660029',
        'text-align': 'center',
        'vertical-align': 'bottom',
        'display': 'table-cell',
        'font-size': '150%'
    });
    $(text2).text('Unlocked!').css({
        'color': '#660029',
        'text-align': 'center',
        'vertical-align': 'middle',
        'display': 'table-row',
        'font-size': '150%'
    });

JSFiddle

使标题显示在不同的行上

2 个答案: