javascript - 使 li 元素成为phonegap按钮

Question

我想在我正在做的phonegap应用程序中使用一个按钮而不是li。

这就是它的样子

    <div class="menu-search">
    <ul>
        <li>
            <span><input type="text" id="txtSearch" placeholder="Enter  Name"></span>
        </li>

        <li>
            <span><select name="selCategory" id="selCategory"></select></span>
        </li>
        <li>
            <span><select name="selCity" id="selCity"></select></span>
        </li>
        <li>  <a class="" id="btnSearch">Apply Filters</a></li>
        <li> <a class="btn" id="btnClearSearch">Clear Filters</a></li>
        <li><a class="close-search" href="#"><i class="fa fa-times"></i>Close<i class="fa fa-circle"></i></a></li>
    </ul>
 </div>

我不想在这里使用 Bootstrap 按钮。

这是fiddle对于同样的。

请提出建议。

Answer 1

我假设您只需要 CSS，如果是这样，请尝试以下操作:

#buttons li {
    float: left;
    list-style: none;
    text-align: center;
    background-color: #000000;
    margin-right: 30px;
    width: 150px;
    line-height: 60px;
}    

#buttons li a{
        text-decoration: none;
        color: #FFFFFF;
        display: block;
    }

    #buttons li a:hover {
        text-decoration: none;
        color: #000000;
        background-color: #33B5E5;
    }

您可以在这里找到更多信息:https://alextheedom.wordpress.com/code-and-stuff/creating-buttons-from-ul-element/