2016-08-19 8 views
0

WindowsのタブレットとiPadに焦点を当てたVisual studioを使用してApache cordovaアプリケーションを作成しています。スタイリングのために、私は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の能力に従うページの下に。前もって感謝します!

答えて

0

htmlの<input>タグの後に<br/>タグを削除してみてください。

<br/>は改行です。これはほとんど間違いなくあなたの問題です。

+0

私は試しましたが、最初の4つのテキストボックスを同じ行に置き、次の4つのテキストボックスを次の行に置きます。私は実際に最初の4を一方の側に、他の4をそれに隣接してほしい。 –

+0

次に、最初のdiv cssに 'float:left'プロパティを追加し、2番目のdivに' float:right'プロパティを追加します。 – DrSatan1

+0

今私もこれを試しました。まだ変更バディ!それは '

'のためですか?これらの2つのdivs、私はそれに含まれています。 –

関連する問題