如何划分页面并将文本框彼此相邻

时间:2016-08-19 09:00:34

标签: html css visual-studio-2015 winjs apache-cordova

我正在使用Visual Studio创建一个Apache cordova应用程序,专注于Windows平板电脑和iPad。对于目前使用Winjs的造型。在这里,我附加一个图像,我需要相邻的最后4个文本框。 而且我使用了span,div以及我所能做的一切但却无法做到。请帮助!

App screen

以下是我的HTML部分: -

 <script src="./winjs/js/base.min.js"></script>
<script src="./winjs/js/ui.min.js"></script>

<link href="nav_home.css" rel="stylesheet" />

<div class="divContainer" style="vertical-align: top;">

    <header aria-label="Header content" role="banner">
        <div class="win-h3">Sales Force</div>
        <hr class='styleHr' />
    </header>

    <section aria-label="Main content" role="main">

        <h2 class="win-h2"> POS Details</h2>


        <div id="dv1">

            Name:  &nbsp;&nbsp;&nbsp;&nbsp;   <input type="text" value="CORINNE" class="win-textbox" /><br />
            Address: &nbsp; <input type="text" value="Rue De Cambon" class="win-textbox" /><br />
            Zip code: &nbsp;<input type="text" value="77561" class="win-textbox" /> <br />
            Sales Rep:&nbsp;<input type="text" value="111 - Delphine Dupont" class="win-textbox" />
        </div>



        <div id="dv2">
            Name:  &nbsp;&nbsp;&nbsp;&nbsp;   <input type="text" value="CORINNE" class="win-textbox" /><br />
            Address: &nbsp; <input type="text" value="Rue De Cambon" class="win-textbox" /><br />
            Zip code: &nbsp;<input type="text" value="77561" class="win-textbox" /> <br />
            Sales Rep:&nbsp;<input type="text" value="111 - Delphine Dupont" class="win-textbox" />

        </div>

        <br />

        <table class="table-fill">
            <thead>
                <tr>
                    <th class="text-left">Contact Name</th>
                    <th class="text-left">Contact Number</th>
                </tr>
            </thead>
            <tbody class="table-hover">
                <tr>
                    <td class="text-left">Josephine Brew</td>
                    <td class="text-left">056-987-321</td>
                </tr>
                <tr>
                    <td class="text-left">Ashley Rose</td>
                    <td class="text-left">056-123-744</td>
                </tr>
                <tr>
                    <td class="text-left">Brian Knight</td>
                    <td class="text-left">056-987-321</td>
                </tr>
                <tr>
                    <td class="text-left">Ingrid Withers</td>
                    <td class="text-left">056-963-852</td>
                </tr>
                <tr>
                    <td class="text-left">Eva Jones</td>
                    <td class="text-left">056-753-951</td>
                </tr>
            </tbody>
        </table>




    </section>

我也想知道如何将图形按钮放在页面下方,这将遵循WinJs的能力。提前谢谢!

1 个答案:

答案 0 :(得分:0)

尝试删除html中<br/>标记后的<input>标记。

<br/>是换行符。这几乎肯定是你的问题。