@kansai5963posted at 2020-09-09

htmlでインプットボックスを横並びに表示したい。

Q&A

Closed

質問内容

ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。
こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。
何とかして縦2×横2に置き換えることはできないでしょうか？
ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。

<div style="top : 161px;left : 8px;    position : absolute; z-index : 4;    width : 847px; height : 252px; " id="Layer5">
  <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333">
    <table border="1" height="252" width="818">
      <tr bgcolor="gray" style="color:white"  height="50">
        <th height="42" width="92"><b>列1</b></th>
        <th height="42" width="212">列2・列3<br>列4・列5</th>
        <th height="42" width="137">列7/列8</th>
        <th height="42" width="189"><b>列9/列10</b></th>
      </tr>
      <tr bgcolor="lightyellow">
        <td align="center" height="47" width="92">
          <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目">
        </td>
        <td align="center" height="47" width="312">
          <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目">
          <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目">
          <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目">
          <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目">
      </td>
        <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目">
          <span>
          <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目">
          </span>
        </td>
        </div>
        <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目">
          <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目">
        </td>

      </tr>
      <tr>
        <td align="center" height="47" width="92"></td>
        <td align="center" height="47" width="212"></td>
        <td align="center" height="47" width="137"></td>
        <td align="center" height="47" width="189"></td>
      </tr>
    </table>
  </div>
</div>

実行結果【上記で表示させた場合】

ーーーーー｜　　86行目　　｜ーーーーー｜
ーーーーー｜　　87行目　　｜ーーーーー｜　　96行目　
83行目　　｜　　88行目　　｜　　92行目｜　　97行目
ーーーーー｜　　89行目　　｜ーーーーー｜

【やりたいこと】

ーーーーー｜ーーーーーーーーーー｜ーーーーー｜
ーーーーー｜　　86行目｜87行目　｜ーーーーー｜　　96行目　
83行目　　｜　　88行目｜89行目　｜　92行目　｜　　97行目
ーーーーー｜ーーーーーーーーーー｜ーーーーー｜

1Answer

@tukiyo3 posted at 2020-09-09

IEだとflexboxがうまいこと動かなかったので以下。

+ <!DOCTYPE html>
+ <meta charset="utf-8">
+ <style>
+ td.container input {
+ 	width: 47%;
+ }
+ </style>

  <div style="top : 161px;left : 8px;    position : absolute; z-index : 4;    width : 847px; height : 252px; " id="Layer5">
    <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333">
      <table border="1" height="252" width="818">
        <tr bgcolor="gray" style="color:white"  height="50">
          <th height="42" width="92"><b>列1</b></th>
          <th height="42" width="212">列2・列3<br>列4・列5</th>
          <th height="42" width="137">列7/列8</th>
          <th height="42" width="189"><b>列9/列10</b></th>
        </tr>
        <tr bgcolor="lightyellow">
          <td align="center" height="47" width="92">
            <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目">
          </td>
-         <td align="center" height="47" width="312">
+         <td align="center" height="47" width="312" class="container">
            <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目">
            <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目">
            <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目">
            <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目">
        </td>
          <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目">
            <span>
            <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目">
            </span>
          </td>
          </div>
          <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目">
            <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目">
          </td>
  
        </tr>
        <tr>
          <td align="center" height="47" width="92"></td>
          <td align="center" height="47" width="212"></td>
          <td align="center" height="47" width="137"></td>
          <td align="center" height="47" width="189"></td>
        </tr>
      </table>
    </div>
  </div>

もっとましにするには CSS Gridを使うのがよいです。
https://coliss.com/articles/build-websites/operation/css/how-to-css-grid-for-ie11.html#h203

もしくは css framework のようなものを使うのもよいでしょう。
https://segakuin.com/css/skeleton/

skelton.cssを使用する場合

<div class="row">
  <div class="one-half column">1</div>
  <div class="one-half column">2</div>
</div>

0Like

Comments

@kansai5963
Questioner
ご回答いただきありがとうございました。
無事表示することができました。

Are you sure you want to delete the question?