ボタンとテキスト入力をテーブルの他の行と同じ幅に設定するにはどうすればよいですか？

debugcn 投稿 Dev

マイケル

テーブルの最初の行の中に、テキスト入力とボタンの組み合わせを配置します。次の行には、テキスト入力フィールドのみが含まれています。すべての行は同じ幅である必要があります。次のスクリーンショットを参照してください。

私の質問は、ボタンとテキストボックスをテーブルの他の行と同じサイズにする方法です。

現在の状態:(フィドル）

望ましい状態：

<table class="">
  <tr>
    <td>text:
    </td>
    <td>
      <input type="text" ID="txtDescPoint" CssClass="form-control input-sm" />
      <input type="button" class="" value="..." id="ffcolorswtach" style="position: relative; left: 5px; top: 0px; color: #000000; background-color: #d8d5d5;" onclick="PickColor(1, false, false)" />
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>X:
    </td>
    <td>
      <input type="text" ID="txtLon" runat="server" CssClass="form-control btn-sm" />
    </td>
  </tr>
  <tr>
    <td>Y:
    </td>
    <td>
      <input type="text" ID="txtLat" runat="server" CssClass="form-control btn-sm" />
    </td>
  </tr>
</table>

Gerrit Halfmann

あなたのjsfiddleはすでにブートストラップで実行されています！

では、なぜ非常に古い方法を使用してテーブルをレイアウトする必要があるのでしょうか。Bootstrapは、セマンティックで保守可能なフォームをセットアップするために使用できる、すぐに使用できるツール/クラスをすでに多数提供しています:(更新されたjsFiddle）

.form-control,
.input-group {
  width: 100%;
  margin-bottom: 10px;
}

.input-group-addon {
  min-width:60px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div style="width: 300px; margin: 20px auto">

  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">Text</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Button</button>
      </span>
  </div>
  
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon2">X</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon2">
  </div>

  <div class="input-group">
    <span class="input-group-addon" id="basic-addon3">Y</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon3">
  </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-1

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

ボタンとテキスト入力をテーブルの他の行と同じ幅に設定するにはどうすればよいですか？

ボタンとテキスト入力をテーブルの他の行と同じ幅に設定するにはどうすればよいですか？

動的テキストのボタンの幅を、div内の最も幅の広いボタンと同じ幅に設定するにはどうすればよいですか？

デフォルトの大文字をスタイルに設定した場合、同じテキストボックスに大文字と小文字の組み合わせを入力するにはどうすればよいですか？

同じ行に他のコントロールと一緒にリストテキストを表示するにはどうすればよいですか？

同じ行に他のコントロールと一緒にリストテキストを表示するにはどうすればよいですか？

JavaFX-ステージを表示する前に、すべてのボタンに同じ幅を設定するにはどうすればよいですか？

テキストとボタンを同じ行に揃えるにはどうすればよいですか？

同じテーブルで最小と最大のスタイルを設定するにはどうすればよいですか？

個別の入力でノードとリンクのテキストを手動で設定するにはどうすればよいですか？

行と同じテーブルに値の合計を表示するにはどうすればよいですか（caseステートメントの場合）？

同じフォームのボタンがある場合、テキスト入力フィールドでキー入力イベントをトリガーするにはどうすればよいですか？

ユーザーによるテキスト入力のスタイルを設定するにはどうすればよいですか？

高性能と低コストのために1500万行以上のテーブルキーを設定するにはどうすればよいですか？

テキスト入力に固定フォントサイズを割り当てるときに、テキスト入力とボタンを同じ高さにするにはどうすればよいですか？

phpmyadminテーブル構造を編集するときにコメントの列幅を設定するにはどうすればよいですか？

pygameで入力テキストボックスモジュールの条件を設定するにはどうすればよいですか？

HAMLのプレーンテキストと同じ行にRubyIFステートメントを追加するにはどうすればよいですか？

コンソールの同じ行に整数からテキストと値を印刷するにはどうすればよいですか？

通常のテキストとアニメーションテキストを同じ行に配置するにはどうすればよいですか？

ボタンをテキスト (ラベル) と同じ行に配置するにはどうすればよいですか

同じテーブル内のいくつかの行の列値を他の行と同じに設定するにはどうすればよいですか?

テキストボックスをhtmlテーブルのtdタグの中央に設定するにはどうすればよいですか？

レイアウトの下部にある画面の幅を埋めるために2つ以上のボタンを並べて設定するにはどうすればよいですか（スティッキーメニューとは異なります）。

クリックしたときにキーボードの上にテキスト入力を設定するにはどうすればよいですか？リアクトネイティブ

ボタンのテキストの色を設定するにはどうすればよいですか？JAVA

osmdroidと同じようにmapsforgeでバウンディングボックスを設定する方法と、pathLayerの上または下にテキストを配置するにはどうすればよいですか？

入力したテキストに応じてテキストフィールドの幅を増やすにはどうすればよいですか？

同じ行のチェックボックスをオンにしたときに、別のテーブルのテーブル行データを取得するにはどうすればよいですか？

WPFウィンドウの幅をタイトルバーのコンテンツと同じに設定するにはどうすればよいですか？

同じテンプレートにitemsourceを設定するときに、他のソースをプロパティに設定するにはどうすればよいですか？