Remove line separator of listview jquery mobile

问题

I am using a listview of Jquery mobile and I want to remove the line separator of each list item in my css. How can I do this? Thank you.

<ul data-role="listview" class="panel-list" data-icon="false">
            <li>
                <a href="#" data-t="lateral_menu_option1" onclick="$('.main-panel').panel('close')" class="main-panel-menu-opt">
                    <div class="panel-images-div"><img src="../img/img.png" class="panel-images"></div>
                </a>
            </li>
            <li>
                <a href="#" data-t="lateral_menu_option2" onclick="$('.main-panel').panel('close')" class="main-panel-menu-opt">
                    <div class="panel-images-div"><img src="../img/img.png" class="panel-images"></div>
                </a>
            </li>
            <li>
                <a href="#" data-t="lateral_menu_option3" data-t="lateral_menu_option2" onclick="$('.main-panel').panel('close')" class="main-panel-menu-opt">
                    <div class="panel-images-div"><img src="../img/img.png" class="panel-images"></div>
                </a>
            </li>
            <li>
                <a href="#" data-t="lateral_menu_option4" onclick="$('.main-panel').panel('close')" class="main-panel-menu-opt">
                    <div class="panel-images-div"><img src="../img/img.png" class="panel-images"></div>
                </a>
            </li>
            <li>
                <a href="#" data-t="lateral_menu_option5" onclick="$('.main-panel').panel('close')" class="main-panel-menu-opt">
                    <div class="panel-images-div"><img src="../img/img.png" class="panel-images"></div>
                </a>
            </li>
            <li>
                <a href="#" data-t="lateral_menu_option6" onclick="localStorage.setItem('languagegiza', ''); $('.main-panel').panel('close')" class="main-panel-menu-opt">
                    <div class="panel-images-div"><img src="../img/img.png" class="panel-images"></div>
                </a>
            </li>
        </ul>
    </div><!-- /panel -->

回答1:

simply add in your css:

.ui-btn-up-c { border:0px;}

回答2:

To remove Line Separator of List View, you can add this style in CSS.

.ui-btn-inner
{
    border-width: 0px;
}

It works for me.

回答3:

I have done this and just wrote in my css file:

#listview-main .ui-btn {border:0px}

Using jQuery 1.11.2 + jQuery Mobile 1.4.5
Note the id selector for listview... this code does not worked without that.

来源：https://stackoverflow.com/questions/22832220/remove-line-separator-of-listview-jquery-mobile

标签

css

jquery-mobile