Wie man eine Seite teilt und die Textfelder nebeneinander platziert

Question

Ich erstelle eine Apache Cordova-Anwendung mit Visual Studio konzentriert sich auf die Windows-Tablet und iPads. Zum Styling verwende ich derzeit Winjs. Hier füge ich ein Bild an, wo ich die letzten 4 nebeneinander liegenden Textfelder brauche. Und ich benutzte span, div und was ich konnte, aber konnte nicht dazu kommen. Bitte Hilfe!

Hier ist der HTML-Teil, das ich habe: -

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

Ich würde auch gerne wissen, dass, wie würde ich grafische Schaltflächen setzen unten auf der Seite, die WinJs Fähigkeiten folgen wird. Danke im Voraus!

Answer 1

Versuchen Sie, das <br/> Tag nach den <input> Tags in Ihrem HTML zu entfernen.

<br/> ist ein Zeilenumbruch. Das ist fast definitiv dein Problem.