Question

我在页脚中添加listView

     <  <!DOCTYPE html>
    <html>
    <head>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css">
    <script src="../js/jquery-1.10.2.min.js"></script>
    <script src="../js/jquery.mobile-1.4.2.min.js"></script>
    <script src="http://responsiveslides.com/responsiveslides.min.js"></script>
<style>
.ui-btn.ui-btn-icon-right.ui-icon-carat-r{text-align: center;}
        .ui-btn-icon-right:after {
            display:none;
        }
</style>
<body>
 <div data-role="page" id="index" style="background-color:#666666;">

      <div data-role="content" class="slideshow">
      ....
      ....
      ....
      </div>
   <div data-role="footer" data-position="fixed" id="footer" style="background:#808080;">
        <ul data-role="listview" style="border-width: 0px;">
    <li style="background:#ffffff !important;border:none;"><a href="#" style="background-color: #666666;border-width: 0px;"><span style="color:white">Home | Office | Shop | Industrial | Exterior | Decor</span><p class="ui-li-desc" style="color:white">ENERGY SAVING LED LIGHTS</p></a></li>
            </ul>
      </div> 



</body>
</html>

但添加了白色边框，然后添加border-width：0px;但没有用它再次显示白色边框请告诉我如何删除ListView上的白色边框

Answer 1

尝试添加此规则：

#footer ul{
 border: none !important;
}

Answer 2

因为身体有边缘而引起白色：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0px;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css">
    <script src="../js/jquery-1.10.2.min.js"></script>
    <script src="../js/jquery.mobile-1.4.2.min.js"></script>
    <script src="http://responsiveslides.com/responsiveslides.min.js"></script>
    <style>
        .ui-btn.ui-btn-icon-right.ui-icon-carat-r {
            text-align: center;
        }

        .ui-btn-icon-right:after {
            display: none;
        }
    </style>
    <body>
        <div data-role="page" id="index" style="background-color: #666666;">

            <div data-role="content" class="slideshow">
                ....
      ....
      ....
            </div>
            <div data-role="footer" data-position="fixed" id="footer" style="background: #808080;">
                <ul data-role="listview" style="border-width: 0px;">
                    <li style="background: #ffffff !important; border: none;"><a href="#" style="background-color: #666666; border-width: 0px;"><span style="color: white">Home | Office | Shop | Industrial | Exterior | Decor</span><p class="ui-li-desc" style="color: white">ENERGY SAVING LED LIGHTS</p>
                    </a></li>
                </ul>
            </div>
    </body>
</html>

Answer 3

我在Firefox，Chrome和IE 10中尝试过您的代码，但看不到任何白色边框。我认为你的边界来自父元素而不是来自标记的这一部分。

Answer 4

您看到白线，因为background-color:white已在li.

中使用了

<li style="background:#ffffff !important;border:none;"><a href="#" style="background-color: #666666;border-width: 0px;">

background-color

通过更改li您的白线消失。

注意：这样做会很好，而不是将所有项目放在单li中;将每个项目放在每个{{1}}上。

如何删除ListView上的白色边框

4 个答案: