bugfix> javascript > 投稿

私はhtmlを使用してこのコードを持っています:

<div id="right">
  <br><br><br>
  <label class='width1'>R : [m] : 10 </label>
  <input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" onchange="updateValue_R(this.value);">
  <span class='width3'>40</span>
  <input class='width4' type="text" id="textInput" value="">
  <script>
    function updateValue_R(val) {
      document.getElementById('textInput').value = "R = " + val;
    }
  </script>
  <br>
  <label class='width1'>Sf : [mks : m/Pa] : -15 </label>
  <input class="width2 slider" type="range" min="-15" max="40" step="0.01" value="-9" id="myRange1" onchange="updateValue_Sf(this.value);">
  <span class='width3'>-9</span>
  <input class='width4' type="text" id="textInput1" value="">
  <script>
    function updateValue_Sf(val) {
      document.getElementById('textInput1').value = "Sf = " + val;
    }
  </script>
</div>

ただし、これにより次の結果が生成されます。

そして実際、タイプ範囲の入力を他の入力と同様に揃えたいだけです。成功せずに、ラベルの余白を増やしようとしました。

ご協力ありがとうございました!

編集:私がやりたいことはこれです:

回答 5 件
  • おそらく最速の方法は Grid を使用することです  レイアウト。メディアクエリなしでビューポートに適切に適応します。

    div で各行を折り返す  素子

    <div>
       <label class='width1'>R : [m] : 10 </label>
       <input class='width2 slider' ...>
       <span  class='width3'>40</span>
       <input class='width4' ...>
    </div>
    
    

    このスタイルをラッパーに与えます

    div {
      display: grid;
      grid-template-columns: 150px minmax(100px, 1fr) 50px minmax(50px, .25fr);
      grid-gap: 1vw;
    }
    
    

    Codepen demo

    その後、いくつかの小さな調整を実行できます(たとえば、 text-align: right   .width3 へ  素子)


    結果

  • display: inline-block; and vertical-align: middle; を使用できます  このため。以下の更新されたスニペットを確認してください...

    label, input, span {
      display: inline-block;
      vertical-align: middle;
    }
    .width1 {
        width: 150px;
    }
    .width3 {
        width: 30px;
    }
    
    
    <div id = "right">
    <br /><br /><br />
    <label class='width1'>R : [m] : 10 </label>
    <input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10"  id="myRange"  onchange="updateValue_R(this.value);">
    <span class='width3'>40</span>
    <input class='width4' type="text" id="textInput" value="" >
    <script>
    function updateValue_R(val) {document.getElementById('textInput').value="R = "+val;}
    </script>
    
    
    <br />
    <label class='width1'>Sf : [mks : m/Pa] : -15 </label>
    <input class="width2 slider" type="range" min="-15" max="40" step="0.01" value="-9"  id="myRange1" onchange="updateValue_Sf(this.value);">
    <span class='width3'>-9</span>
    <input class='width4' type="text" id="textInput1" value="" >
    <script>
    function updateValue_Sf(val) {document.getElementById('textInput1').value="Sf = "+val;}
    </script>
    </div>
    
    

  • テーブルと行を作成して、それらを完全に整列させることができます 以下のコードのように。

    <div id="right">
      <br><br><br>
      <table>
        <tr>
          <td>
            <label class='width1'>R : [m] : 10 </label>
          </td>
          <td>
            <input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" onchange="updateValue_R(this.value);">
          </td>
          <td>
            <span class='width3'>40</span>
          </td>
          <td>
            <input class='width4' type="text" id="textInput" value="">
          </td>
          <script>
            function updateValue_R(val) {
              document.getElementById('textInput').value = "R = " + val;
            }
          </script>
        </tr>
        <tr>
          <td>
            <label class='width1'>Sf : [mks : m/Pa] : -15 </label>
          </td>
          <td>
            <input class="width2 slider" type="range" min="-15" max="40" step="0.01" value="-9" id="myRange1" onchange="updateValue_Sf(this.value);">
          </td>
          <td>
            <span class='width3'>-9</span>
          </td>
          <td>
            <input class='width4' type="text" id="textInput1" value="">
          </td>
          <script>
            function updateValue_Sf(val) {
              document.getElementById('textInput1').value = "Sf = " + val;
            }
          </script>
        </tr>
      </table>
    </div>
    
    

  • 固定 width を追加する必要があります  CSSで要素を正しく配置します。

    他の提案については、この作業スニペットのコメントを参照してください。
    (スニペットをよりきれいにするためにコードの一部を移動しました)

    // Modified this to get only one "function", and removed inline JavaScript
    var sliders = document.querySelectorAll('.slider');
    sliders.forEach(function() {
      this.addEventListener("change", function(event) {
        var elm = event.target;
        sliderText = elm.nextElementSibling.nextElementSibling; // Target the input tag
        sliderText.value = elm.getAttribute("prefix") + ' = ' + elm.value;
      });
    });
    
    
    #right *[class^="width"] { /* Target all elements starting with "width" in #right */
      border: 1px solid #ccc;  /* Added to make it visual */
      vertical-align: middle;  /* Better layout with this */
      display: inline-block;   /* The widths below won't work without this */
    }
    .width1 { /* This is what you need */
      width: 130px;
    }
    .width3 { /* You must want to add this too */
      width: 30px;
      text-align: center;
    }
    
    
    <div id="right">
      <label class='width1'>R : [m] :</label>
      <span class='width3'>10</span><!-- Modified here -->
      <input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" prefix="R">
      <span class='width3'>40</span>
      <input class='width4' type="text" value="">
      <br />
      <label class='width1'>Sf : [mks : m/Pa] :</label>
      <span class='width3'>-15</span><!-- Modified here -->
      <input class="width2 slider" type="range" min="-15" max="40" step="0.01" value="-9" id="myRange1" prefix="Sf">
      <span class='width3'>-9</span>
      <input class='width4' type="text" value="">
    </div>
    
    

    それが役に立てば幸い!

  • ブラウザの display: grid のサポートが制限されているため  (CSSグリッド)、Flexboxを使用してこの方法で行うことをお勧めします。

    * { box-sizing: border-box; }
    .row {
      display: flex;
    }
    .row label {
      min-width: 150px;
    }
    .row span {
      min-width: 20px;
    }
    .row input {
      margin-left: 20px;
    }
    input { width: 100%; }
    
    
    <div class="row">
      <label class='label'>R : [m] : 10 </label>
      <input class="slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" onchange="updateValue_R(this.value);">
      <span>40</span>
      <input type="text" id="textInput" value="">
    </div>
    <div class="row">
      <label>Sf : [mks : m/Pa] : -15 </label>
      <input class="slider" type="range" min="-15" max="40" step="0.01" value="-9" id="myRange1" onchange="updateValue_Sf(this.value);">
      <span>-9</span>
      <input type="text" id="textInput1" value="">
    </div>
    <script>
      function updateValue_R(val) {
        document.getElementById('textInput').value = "R = " + val;
      }
      
      function updateValue_Sf(val) {
        document.getElementById('textInput1').value = "Sf = " + val;
      }
    </script>
    
    

あなたの答え