如何讓這兩個組件出現在同一行？ （文本框 label 和文本框）

Question

這是我的 html 文件

 <div id="radioHeader">
    <div id="radioHeader" onclick="radioClicked()">

      <div class="radio form-check form-check-inline component"> Mode of Transaction<span
          style="color:red;">*</span>
        <div class="radiogq">
          <input type="radio" name="mode" value="cheque" onclick="" checked> Cheque
          <input type="radio" name="mode" value="bank"> Bank Transaction
        </div>
      </div>
      <div>
        <p id="idc"></p><input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id"
          name="fname" size="100">

      </div>
    </div>
  </div>

這是我在文本框中添加值的 js 文件，我希望它們位於同一行。 此文本框 label 將根據單選按鈕中的更改

  function radioClicked() {
  let shapeChoice = document.querySelector('input[name="mode"]:checked').value;

  switch (shapeChoice) {
    case 'cheque':
      document.getElementById("idc").innerHTML = "Enter your Cheque Id"
      break;

    case 'bank':
      document.getElementById("idc").innerHTML = "Enter your Transaction Id"
      break;



    default:
      doucment.getElementById("idc").innerHTML = "Default"
  }
};

radioClicked();

Answer 1

使用CSS，其中一種方式是float:left

 function radioClicked() { let shapeChoice = document.querySelector('input[name="mode"]:checked').value; switch (shapeChoice) { case 'cheque': document.getElementById("idc").innerHTML = "Enter your Cheque Id" break; case 'bank': document.getElementById("idc").innerHTML = "Enter your Transaction Id" break; default: doucment.getElementById("idc").innerHTML = "Default" } }; radioClicked();

 .cs1 { float:left; }

 <div id="radioHeader"> <div class="radio form-check form-check-inline component" "> Mode of Transaction<span style="color:red;">*</span></div> <div id="radioHeader" onclick="radioClicked()"> <div class="cs1 radiogq"> <input type="radio" name="mode" value="cheque" onclick="" checked> Cheque <input type="radio" name="mode" value="bank"> Bank Transaction </div> </div> <div class='cs1'> &nbsp;&nbsp;</div> <div class='cs1' style="position:relative;top:2px;" id=idc></div> <div class='cs1'> &nbsp;&nbsp;</div> <div class='cs1'> <input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id" name="fname" style="width:200px;max-width:100%:"> </div> </div>

Answer 2

我為您的腳本添加了一些改進，並確保您的idc元素向左浮動。 這確保下一個元素將出現在它旁邊。 為了讓它看起來更好，我還在輸入框中添加了一些邊距。

請記住，它在 Stack Overflow 上可能看起來無法正常工作，因為示例中的 window 非常小。 但它會在您的瀏覽器中正常工作。

 // Make sure it runs after the page is loaded document.addEventListener("DOMContentLoaded", function(e){ // Get all radio buttons where name equals "mode" const radios = document.querySelectorAll('input[type=radio][name="mode"]'); function radioChangeHandler(event){ const idc = document.getElementById("idc"); if(this.value === "cheque"){ idc.innerText = "Enter your Cheque Id"; } else if(this.value === "bank"){ idc.innerText = "Enter your Transaction Id"; } else { idc.innerText = "Default"; } } // Attach event handler to each radio button Array.prototype.forEach.call(radios, function(radio) { radio.addEventListener('change', radioChangeHandler); }); });

 #idc { float: left; } #fname { margin-top: 13px; margin-left: 5px; }

 <div id="radioHeader"> <div id="radioHeader"> <div class="radio form-check form-check-inline component"> Mode of Transaction<span style="color:red;">*</span> <div class="radiogq"> <input type="radio" name="mode" value="cheque" onclick="" checked> Cheque <input type="radio" name="mode" value="bank"> Bank Transaction </div> </div> <div> <p id="idc"></p><input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id" name="fname" size="100"> </div> </div> </div>

無線電事件處理程序的參考： 如何在更改事件中使用無線電？

Answer 3

該行為是因為該段落即

默認情況下元素是塊元素。 因此，它占用一個塊並在其前后添加換行符。 所以，改變它的一種方法是改變段落塊的行為，即

通過將 display 屬性更改為 inline 或 inline 塊來獲取元素。 由於它已經有任何 idc 的 id，它可以這樣做： -

#idc {
  display: inline;
}

或者，label 和輸入可以放在段落內，如果有足夠的元素容納，它將顯示在同一行中。 這是更好的方法，因為 label 標記用於顯示 label 並使用 for 屬性鏈接到輸入。

<p>
  <label id="idc" for="fname"></label>
  <input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id" name="fname" size="100">
</p>