表行不显示水平在Cordova/Phonegap

为什么tr标签不显示我的按钮水平而是垂直的

类似的代码可以在jsfiddle

上正常工作

我做错了什么?

here my HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<link href="css/menuprincipale.css" rel="stylesheet" type="text/css" media="all"/>
<meta name="msapplication-tap-highlight" content="no" />
<script src="cordova.js"></script>
<script src="js/jquery.js"></script>
</head>
<div data-role="page">
    <div data-role="header"></div>
    <div data-role="content">
        <table class="clsActionTable">
            <tr>
                <td style="text-align: center;">
                    <button class="clsActionButton" id="idAddButton">Add</button>
                    <button class="clsActionButton" id="idEditButton">Edit</button>
                    <button class="clsActionButton" id="idDeleteButton">Delete</button>
                </td>
            </tr>
        </table>
        <div data-role="footer" data-position="fixed">
            <img src="img/logo.png" />
        </div>
    </div>

here my CSS:

.clsActionTable
{
 width: 100%;
 height:20%;
 color: white;
 font-size: smaller;
}
.clsActionButton
{
 width: 180px;
 height:40px;
}
#idActionPlane
{
 left: 0px;
 bottom: 0px;
 height:20%;
 width:100%;
 background-color: #4E5A81;
 color: White;
}

我正在使用这些:

试试这段代码。

<tr>
    <td style="text-align: center;">
    <button class="clsActionButton" id="idAddButton">Add</button>
    </td>
    <td style="text-align: center;">
    <button class="clsActionButton" id="idEditButton">Edit</button>
    </td>
    <td style="text-align: center;">
    <button class="clsActionButton" id="idDeleteButton">Delete</button>
    </td>
</tr>

对于任何有同样问题的人，上面的好答案不起作用，在我的情况下，从jQuery移动表html中删除data-role="table"解决了这个问题，因为它默认情况下使表垂直。更好的方法肯定是通过css.

相关内容

最新更新

热门标签：