Question

我正在尝试在jquery中获取一个锚点，以便在列表结构中的复选框旁边水平排列。我之前有锚对象里面的复选框，这产生了我想要的结果，但现在我希望复选框有一个单独的功能，然后是锚元素，因此我希望将它们分开。我正在使用的CSS如下所示，从Jsfidle可以看出，复选框浮动到按钮右上角的位置看起来很糟糕。这里的答案已经注意到使用字段包含或显示：内联将解决问题，但我无法让它工作。

<div data-role="main" class="ui-content">
            <h3>Some header</h3>
            <ul data-role="listview" id = "tasklistTasks">
                <li>
            <div data-role="fieldcontain" style=" display:inline" >
                <input type="checkbox">
                    <a href="#" class="ui-btn">Go here</a>
                    </div>
                    </li>

              <li>
            <div data-role="fieldcontain" style=" display:inline" >
                <input type="checkbox">
                    <a href="#" class="ui-btn">Go here</a>
                    </div>
                    </li>

    </ul>
        </div>

我正在使用Jquery 2.1和Jquery mobile 1.4.2。谢谢你的帮助

Answer 1

此行为的原因是复选框从您应用的jquery移动CSS中获取CSS。在特定的CSS中，您的复选框类＆＃39; CSS被覆盖了，它有：

 margin: -11px 0 0 0;

因为它来到你的父div的左上角。如果您没有使用该CSS的CDN并且您拥有该下载版本，则可以使用以下命令对其进行修改：

 .ui-checkbox input, .ui-radio input {
position: absolute;
left: .466em;
width: 22px;
height: 22px;
margin: 12px 0 0 0;
outline: 0!important;
z-index: 1;
display: inline-block;
}

您还可以在浏览器中调试自己。

以下是它现在的样子，我想这就是你想要的：

http://jsfiddle.net/appleBud/bWFYv/2/

希望这有帮助。

Jquery Mobile CSS问题

1 个答案: