Question

我无法弄清楚如何摆脱按钮右侧的这条白线。这是问题所在：

这是我的代码：

    <!DOCTYPE html><html><style type="text/css">
        </style><head><title></title>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head><body>

        <div data-role="navbar" >
            <ul>
                <li><a id='button1' data-theme ="a" data-iconpos="top">Button 1</a></li>
                <li >  <a id='button2' data-theme ="a" data-iconpos="top">Button 2</a></li>
<li >  <a id='button3' data-theme ="a" data-iconpos="top">Button 3</a></li>
</ul>
        </div><!-- /navbar -->

        <div data-role="navbar" >
            <ul>
                <li><a id='button4' data-theme ="a" data-iconpos="top">Button 4</a></li>
                <li >  <a id='button5' data-theme ="a" data-iconpos="top">Button 5</a></li>

                <li >  <a id='button11' data-theme ="a" data-iconpos="top">Button 6     </a></li>
            </ul>
        </div><!-- /navbar -->

        <div data-role="navbar" >
            <ul>
                <li><a id='button6' data-theme ="a" data-iconpos="top">Button 7</a></li>
                <li >  <a id='button10' data-theme ="b" data-iconpos="top">Button 8</a></li>
            </ul>
        </div><!-- /navbar -->

    </body></html>

Answer 1

将一个类（即class =“lastbut”）设置为每行的最后一个按钮。然后，在CSS中执行以下操作：

.lastbut {
   width:34% !important;
}

33％+ 33％+ 33％等于99％你看到白色1％如果你想修理它，其中一个按钮应该是34％。

Answer 2

在CSS中尝试以下代码：

.ui-grid-b > :nth-child(n) {
   margin-right: 0px!important;
 }

Answer 3

我通过在navbar div上使用overflow-x：hidden来解决这个问题：

<div data-role="navbar" data-iconpos="top" style="overflow-x:hidden">

任何人都可以告诉我为什么这个空白区域出现在我的jQuery移动按钮中？

3 个答案: