Javascript jQuery标题中的多个按钮

我正试图在我用jQuery制作的移动web应用的标题中添加3个按钮

我可以制作2个按钮，但当我在标题上放置第3个按钮时，第一个按钮就消失了：/

我试着回答这个问题：

但是，由于某些原因，jquery样式将不会应用于标头内的div标记

我的标题当前包含以下代码：

<div data-role="header">
    <div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
        <a href="#" id="homebtn" data-roll="button" data-icon="home" data-iconpos="notext"></a>
        <a href="#" id="searchbtn" data-roll="button" data-icon="search" data-iconpos="notext" class="ui-btn-left"></a>
    </div>
        <h1 id="usr"></h1>
    <a href="#" id="profileButton" data-roll="button" data-icon="info">Profile</a>  

    </div>

我的网页如下所示：

有人知道为什么会这样吗

---

请原谅任何语法/拼写错误：我有诵读困难，可能在校对时遗漏了一些内容

好的，感谢@TSV指出我使用的是“数据卷”而不是“数据角色”

---

这实际上完全解决了我的问题：）

这可能与ui btn left类有关。尝试在浏览器中使用Inspect元素来处理CSS。是否确实要键入“data roll=”button“（data-roll），而不是“data role=”button“？嗯，是的，是的，我键入了。。。。。我现在就解决这个问题xD。。。。。我将尝试使用CSS