0

我不确定它是否有所作为，但这个问题与 Windows 8 应用程序中的 HTML5 有关。

我有以下输入表单：

<div class="input-form">
    <form id="myData" >
        <table>
            <tr>
                <td>Data1</td>
                <td><input type="text" title="data1" id="data1" value="test" required /></td>
            </tr>
            <tr>
                <td>Data2</td>                            
                <td>
                    <div>
                       <input type="text" title="data2" id="data2" />
                       <button id="lookup">...</button>
                    </div>
                </td>
            </tr>
...

这个想法是用户单击省略号并发生某些事情（以帮助他们输入数据）。这可以正常工作，但是，在 Windows 8 应用程序中，您必须迎合快照模式。所以到目前为止，这是我的 CSS 样式来处理这个问题：

@media screen and (-ms-view-state: snapped) {
.homepage section[role=main] {
    margin-left: 20px;
}

.input-form {
    width:320px;        
}

这给我的只是表格的第二列 - 这很好，但是对于带有椭圆的字段，我也希望能够看到椭圆。我尝试了各种方法：设置两个字段的宽度，设置表格宽度，但无论我做什么似乎都没有什么不同。

我知道有人会告诉我使用桌子是一件坏事，我会被判处地狱第七圈之类的；但在我使用表格之前，我尝试了各种其他方法，但都没有给我想要的表格效果。

所以我的问题是，我该如何设计表格？或者，如果这不可能，我该如何格式化我的 HTML 以使其显示为表格？

编辑：

只是为了澄清我已经尝试过其他方法：

<div class="input-form">                    
    <form id="mailData" >
        <div id="input-left">
            <div>Data1</div>
            <div>Data2</div>
        </div>

        <div id="input-centre">
            <div><input type="text" title="data1" id="data1" value="test" required /></div>
            <input type="text" title="data2" id="data2" />                                                                    
        </div>

        <div id="input-right">
            <div></div>
            <button id="lookup">...</button>
        </div>
    </form>

以及以下样式：

.input-form {    
margin-left:320px;
display:-ms-grid;
-ms-grid-rows:1fr;
-ms-grid-columns:auto auto auto;
height:100%;
}

#input-left {
-ms-grid-column: 1;
}

#input-centre {
-ms-grid-column: 2;
}

#input-right {
-ms-grid-column: 3;
}

这仅显示带有 Data1、Data2 标签的表单，下面是输入框。

4

2 回答 2

0

这是一个很好的例子，说明使用 Blend for Visual Studio 可能会让您的生活更轻松。Blend 允许您以视觉方式处理页面上的元素以及应用于它们的 CSS 样式，因此您可以立即看到给定规则的影响。Blend 还支持（通过设备窗格）以 4 种定义的视图状态中的任何一种查看您的内容，包括快照视图，因此您可以立即判断您的规则是否正在执行您希望它们执行的操作。

以下是一些用于在 Blend 中设计 HTML 应用程序的文档，可帮助您入门。

虽然我不会因为使用表格而让你陷入困境（无论如何，使用表格进行布局往往会自我惩罚），但我建议你查看CSS3 Grid 布局和CSS3 Flexible Box 布局文档，其中为使用表格元素进行布局提供了几个很好的替代方案。

还有一个关于定义应用程序布局的快速入门，您可能会觉得有帮助。

有关 Windows 应用商店应用开发的更多信息，请注册App Builder。

于 2013-03-28T14:29:59.663 回答
0

HTH。

示例 html：

<div class="inputs form">
    <div class="property data1">
        <h2 class="caption">Data1</h2>
        <input type="text" placeholder="Enter value here" required="required"/>
    </div>
    <div class="property data2">
        <h2 class="caption">Data2</h2>
        <input type="text" placeholder="Enter value here" />
        <button type="button">...</button>
    </div>
</div>

示例 CSS：

.inputs.form
{
    display: -ms-flexbox;
    -ms-flex-direction: column;
}

.inputs.form .property
{
    display: -ms-grid;
    -ms-grid-columns: auto auto auto;
}

    .inputs.form .property .caption
    {
        -ms-grid-row-align: center;
        padding: 0 20px 0 0;
    }

    .inputs.form .property input
    {
        -ms-grid-column: 2;
    }

    .inputs.form .property button
    {
        -ms-grid-column: 3;
        min-width: 0;
    }
于 2013-04-05T11:54:12.600 回答