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;        
}

これで得られるのは、テーブルの 2 番目の列だけです。これは問題ありませんが、楕円のあるフィールドについては、楕円も表示できるようにしたいと考えています。2 つのフィールドの幅の設定、テーブルの幅の設定など、さまざまなことを試しましたが、何をしても違いはないようです。

テーブルを使うのは悪いことだと誰かが私に言うだろうと私は知っています。しかし、テーブルを使用する前に、他のさまざまなアプローチを試しましたが、どれも私が望んでいたテーブル効果をもたらしませんでした.

だから私の質問は、どうすればテーブルのスタイルを整えることができるかということです。または、それが不可能な場合、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

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 に答える
0

これは、Blend for Visual Studio を使用すると作業が楽になる良い例です。Blend を使用すると、ページ上の要素とそれらに適用される CSS スタイルを視覚的に操作できるため、特定のルールの影響をすぐに確認できます。また、Blend は ([デバイス] ペインを介して) スナップ ビューを含む 4 つの定義済みビュー ステートのいずれかでコンテンツを表示することもサポートしているため、ルールが意図したとおりに実行されているかどうかをすぐに確認できます。

Blend で HTML アプリをデザインするためのドキュメントをいくつか紹介します。

テーブルを使用することであなたを地獄に追いやるつもりはありませんが (テーブルをレイアウトに使用することは、いずれにせよ自傷行為になる傾向があります)、CSS3 グリッド レイアウトとCSS3 フレキシブル ボックス レイアウトのドキュメントを参照することをお勧めします。レイアウトにテーブル要素を使用する代わりに、いくつかの優れた代替手段を提供します。

また、アプリのレイアウトを定義するためのクイック スタートもあり、役立つと思われます。

Windows ストア アプリ開発の詳細については、App Builderに登録してください。

于 2013-03-28T14:29:59.663 に答える