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

Question

我正在使用专注于Windows平板电脑和iPad的Visual Studio创建Apache Cordova应用程序。对于目前我使用Winjs的造型。在这里，我附上了一张图片，我需要最后4个相邻的文本框。 我用span，div和我所能做的，但无法做到。请帮忙！

这里是我的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能力的页面的下方。提前致谢！

Answer 1

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

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