如何将按钮放在选择框旁边？ （格式化jQuery-Select2）

Question

注意，这不仅仅是另一个＆＃34; margin-right＆＃34;帖子。 Select2似乎让我感到困惑。

我的表格看起来像这样：

这就是错误的样子 - 电子邮件地址错误格式正确。

显然，New按钮应位于患者下拉列表的旁边。

问题在于：
当你告诉Select2在select上完成它的工作时，它会隐藏该元素并添加几个自己的嵌套元素来替换它。但是，您放在select上的任何类都不会转移到这些生成的元素。

我为margin-right:100%设置.select2-container，这是处理间距的原因。这是为了避免第二个屏幕截图中的行为。我不知道有任何其他方法可以将错误消息强制到下一行。

如果我设置了margin-right:0px，按钮就会出现在下拉列表的旁边，就像我想要的那样，但是错误消息也位于它旁边（如上图所示）。

底部图片的HTML源代码:(我发布了第二张图片的来源，因为它显示了我想要的内容和我不想要的内容）：

<div class="form-group">
    <label class="control-label col-md-2" for="Email">Email Address</label>
    <div class="col-md-10">
        <input class="form-control text-box single-line" data-val="true" data-val-regex="Invalid email format" data-val-regex-pattern=".*" data-val-required="The Email Address field is required." id="Email" name="Email" type="email" value="" />
        <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
    </div>
</div>

This code markup就在那之下。 select2内容不会显示在view-source中，因此会显示屏幕截图。

修复我想避免：
我可以设置margin-right:0px，然后在div中包含margin-right:100%的其他数十个选择框，但这对于枪托来说会是一个痛苦的痛苦。

尝试不起作用的解决方案 在错误类上设置margin-left:100%或margin-left:600px等。

要点： 我需要将New按钮直接放在Select a patient...下拉列表的旁边，但我无法访问下拉列表的样式。

如果它有所不同，我使用ASP.NET MVC和Bootstrap。

Answer 1

您的span是inline元素 - 内联元素在其之前或之后没有换行符，并且它允许旁边的HTML元素。 < /强>

我所做的是使它成为inline-block元素 - 内联块元素被放置为内联元素（与相邻内容在同一行），但它表现为块元件

因此默认情况下，它会从它的行中断开并正确对齐下一行​​。如果。它仍然在同一条线上。在inline-block元素中，我们可以设置width and height，就像inline元素一样，这是不可能的。

提示：始终使用inline-block元素作为包装器，以便更好地对齐并正确包装它们。