輸入框多個要1個輸入框到右上角怎么辦？

我遇到了一些問題，需要幫助

我創建了一個片段來測驗它

.StyleForm {
  margin-top: 230px;
  padding-left: 50px;
}

.StyleFormRest {
  padding-left: 50px;
}

.StyleFormRestRight {
  text-align: right;
  padding-right: 500px;
  margin-bottom: 5px;
  align-items: right;
}

#EmailDisplay,
#AddressDisplay,
#DescriptionDisplay {
  width: 875px;
}

.createMargin {
  margin-bottom: 15px;
}

.Email,
.ContactName,
.ContactNo,
.Address,
.Description {
  font-size: 18px;
}

#PriceModeDisplay {
  text-align: right;
}

.StyleFormRestRight .form-control {
  display: inline-block;
}

<div class="mb-3 StyleForm">
  <label for="Email" class="form-label"><b class="Email">Email</b></label>
  <input type="email" class="col-6 form-control" id="EmailDisplay" disabled readonly>
</div>
<form class="row g-3 StyleFormRest">
  <div class="col-4">
    <label for="Contact Name" class="visually-hidden"><b class="ContactName">Contact Name</b></label>
    <input type="text" class="form-control" id="ContactNameDisplay" disabled readonly>
  </div>
  <div class="col-2 createMargin">
    <label for="Contact No" class="visually-hidden"><b class="ContactNo">Contact No.</b></label>
    <input type="text" class="form-control" id="ContactNoDisplay" disabled readonly>
  </div>
</form>
<div class="mb-3 StyleFormRest">
  <label for="Address" class="form-label"><b class="Address">Address</b></label>
  <input type="text" class="col-6 form-control" id="AddressDisplay" disabled readonly>
</div>
<div class="mb-3 StyleFormRest">
  <label for="Description" class="form-label"><b class="Description">Description</b></label>
  <textarea class="form-control" id="DescriptionDisplay" rows="3" disabled readonly></textarea>
</div>

<div class="mb-3 StyleFormRestRight">
  <label for="PriceMode" class="form-label"><b class="PriceMode">Price Mode</b></label>
  <input type="text" class="col-2 form-control pull-right" id="PriceModeDisplay" disabled readonly>
</div>

我的代碼片段正在展示一些東西，因為這就是我的 html 頁面目前的樣子

所以當你看到我的價格模式時，我已經決定將它放在右側，但是有沒有辦法讓它像原型設計中顯示的那樣進入頁面頂部？

原型設計

uj5u.com熱心網友回復：

我希望我明白你想要什么。你可以簡單地在左邊創建由包裝一切兩列格和包裹是什么在另一個合適的DIV和包裹都div的另一個DIV與顯示幕撓性

<div class="container">
<div>...here goes the content on the left...</div>
<div>...here goes the content on the right...</div>
</div>

.container{
   display:flex;/*This is the new style*/
}
.StyleForm {
  margin-top: 230px;
  padding-left: 50px;
}

.StyleFormRest {
  padding-left: 50px;
}

.StyleFormRestRight {
  text-align: right;
  padding-right: 500px;
  margin-bottom: 5px;
  align-items: right;
}

#EmailDisplay,
#AddressDisplay,
#DescriptionDisplay {
  width: 875px;
}

.createMargin {
  margin-bottom: 15px;
}

.Email,
.ContactName,
.ContactNo,
.Address,
.Description {
  font-size: 18px;
}

#PriceModeDisplay {
  text-align: right;
}

.StyleFormRestRight .form-control {
  display: inline-block;
}

<div class="container"><!-- This is the container -->
<div><!-- This contains whats on the right -->
<div class="mb-3 StyleForm">
  <label for="Email" class="form-label"><b class="Email">Email</b></label>
  <input type="email" class="col-6 form-control" id="EmailDisplay" disabled readonly>
</div>
<form class="row g-3 StyleFormRest">
  <div class="col-4">
    <label for="Contact Name" class="visually-hidden"><b class="ContactName">Contact Name</b></label>
    <input type="text" class="form-control" id="ContactNameDisplay" disabled readonly>
  </div>
  <div class="col-2 createMargin">
    <label for="Contact No" class="visually-hidden"><b class="ContactNo">Contact No.</b></label>
    <input type="text" class="form-control" id="ContactNoDisplay" disabled readonly>
  </div>
</form>
<div class="mb-3 StyleFormRest">
  <label for="Address" class="form-label"><b class="Address">Address</b></label>
  <input type="text" class="col-6 form-control" id="AddressDisplay" disabled readonly>
</div>
<div class="mb-3 StyleFormRest">
  <label for="Description" class="form-label"><b class="Description">Description</b></label>
  <textarea class="form-control" id="DescriptionDisplay" rows="3" disabled readonly></textarea>
</div>
</div>
<div><!-- This contains whats on the left -->
<div class="mb-3 StyleFormRestRight">
  <label for="PriceMode" class="form-label"><b class="PriceMode">Price Mode</b></label>
  <input type="text" class="col-2 form-control pull-right" id="PriceModeDisplay" disabled readonly>
</div>
</div>
</div>

標籤：html css bootstrap-5

上一篇：如何正確使用懸停和位置：絕對？

下一篇：如何在CSS或vue中制作邊框