输入文本和 <a> 之间没有换行符答案

【问题标题】：no line break between input text and <a>输入文本和 <a> 之间没有换行符
【发布时间】：2022-01-22 14:38:49
【问题描述】：

在一个表单中，我有一个文本输入和一个<a>，代表一个按钮来添加一个输入元素。

<div class="col-4">                          
    <input class="form-control" type="text" placeholder="Menge" name="txt_menge[]" value="3">
    <a href="javascript:void(0);" class="add_button" title="Add"><img src="../img/add-icon.png"/></a>
</div>

目前每个元素都有自己的一行，但它们应该在一行中：

我怎样才能做到这一点？

使用引导类。

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

请尝试使用d-flex 而不是col-4

如：<div class="d-flex">

另一种方法是使用引导程序的行和列，如

<div class="row">
 <div class="col">
Input here..
</div>
 <div class="col">
Button here..
</div>
</div>

参考：Bootstrap Grid, Bootstrap flexbox, Bootstrap Forms

【讨论】：

我自己也能想到...我使用表单网格并为每个项目添加一列

【解决方案2】：

在css中添加以下代码：

.col-4{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:300px;
  height:auto;
  border:1px solid #000;
  border-radius:5px;
}

.col-4 input{
  width:250px;
  height:100%;
  font-size:1rem;
  border:none;
  padding:1rem 0.4rem;
  outline:none;
}

.col-4 a{
  height:fit-content;
  }

.col-4 a img{
  width:40px;
  height:40px
}

<div class="col-4">                          
    <input class="form-control" type="text" placeholder="Menge" name="txt_menge[]" value="3">
    <a href="javascript:void(0);" class="add_button" title="Add"><img src="../img/add-icon.png"/></a>
</div>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。