[英]How can I align an item with an item above it in html/css/js?
I have 3 input blanks on my form (see the screenshot below).我的表单上有 3 个输入空格(请参见下面的屏幕截图)。 I have 1 dropdown button and one <input type="text">
in 1 row and another <input type="text">
in the 2nd row.我在第一行有 1 个下拉按钮和一个<input type="text">
<input type="text">
。 I want the 2 <input type="text">
to align.我希望 2 <input type="text">
对齐。 In other words, I want the "Choice 2" box to be right below the "Choice 1" box.换句话说,我希望“选择 2”框位于“选择 1”框的正下方。 How can I do this?我怎样才能做到这一点? Thanks.谢谢。
By the way, This is my html:顺便说一句,这是我的 html:
<div class="container">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
2
<span class="caret"></span>
</button>
<ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<input type="text" name="" value="" placeholder="Choice 1"> <br>
</div>
<div class="container">
<input type="text" name="" value="" placeholder="Choice 2">
</div></div>
And this is my css:这是我的 css:
.container {padding: 1% 20%;
margin: auto;
text-align: center;}
body {
background-color: #b6e6bd;
line-height: 1.6;
}
How can I make the choice 1 and choice 2 boxes which are both <input type="text">
be directly above and below each other?如何使<input type="text">
的选择 1 和选择 2 框彼此直接位于上方和下方? Thanks谢谢
Maybe you are allowed to slightly change HTML?也许您可以稍微更改 HTML?
Here is my try.这是我的尝试。 I've moved two input[text]
to one div
and the dropdown to another.我已将两个input[text]
移至一个div
并将下拉列表移至另一个。 Also I changed .container
class to be flex@center
(but you can use any other layout - table
or div
with known widths).此外,我将.container
class 更改为flex@center
(但您可以使用任何其他布局 - 具有已知宽度的table
或div
)。
.container { padding: 1% 20%; margin: auto; text-align: center; display: flex; justify-content: center; } body { background-color: #b6e6bd; line-height: 1.6; }.container-inner { margin-left: 10px; }
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 2 <span class="caret"></span> </button> <ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1"> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </div> <div class="container-inner"> <input type="text" name="" value="" placeholder="Choice 1"> <br> <input type="text" name="" value="" placeholder="Choice 2"> </div> </div>
The best way is to use a framework like Bootstrap .最好的方法是使用像Bootstrap这样的框架。 But if you won't I suggest you to change your code to this:但是,如果您不这样做,我建议您将代码更改为:
.container { padding: 1% 20%; margin: auto; text-align: center;} body { background-color: #b6e6bd; line-height: 1.6; }
<div class="container"> <div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 2 <span class="caret"></span> </button> <select id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1"> <option><a href="#">2</a></option> <option><a href="#">3</a></option> <option><a href="#">4</a></option> </select> <input type="text" name="" value="" placeholder="Choice 1"> <br> </div> <div class="container"> <input type="text" name="" value="" placeholder="Choice 2" style="margin-right: -64px;"> </div> </div>
I hope this will helpful.我希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.