【发布时间】：2017-07-21 21:26:26
【问题描述】：
注意，这不仅仅是另一个“边缘权利”帖子。 Select2 好像把我搞砸了。
我有一个如下所示的表单：
这就是相同格式出现错误时的样子——电子邮件地址错误的格式正确。
编辑：重新审视这个问题，我不清楚第二张图片是如何相关的。我认为关键是我可以控制错误消息是否显示在表单项旁边或下方，但不能控制按钮。这是几年前的事了，所以我不太记得了，但我想添加此免责声明。
显然New 按钮应该在患者下拉列表旁边。
问题出在这里：
当您告诉 Select2 在 select 上执行其工作时，它会隐藏该元素并添加几个自己的嵌套元素来替换它。但是，您在 select 上放置的任何类都不会转移到这些生成的元素中。
我为.select2-container 设置了margin-right:100%，这是处理间距的原因。这是为了避免第二个屏幕截图中的行为。我不知道有任何其他方法可以将错误消息强制到下一行。
如果我设置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 就在它的正下方。 view-source 中没有出现 select2 的内容，因此是屏幕截图。
我想避免的修复：
我可以设置margin-right:0px，然后将数十个其他选择框包装在具有margin-right:100% 的div 中，但这将是一个巨大的痛苦。
尝试的解决方案无效：
在错误类上设置margin-left:100%或margin-left:600px等。
总结：
我需要将New 按钮直接放在Select a patient... 下拉列表旁边，但我无法访问下拉列表的样式。
如果有什么不同，我正在使用带有 Bootstrap 的 ASP.NET MVC。
【问题讨论】：
-
简单地将
<select>元素包装在一个div 中怎么样？ Select2 在计算宽度方面非常聪明，因此如果您将其包装在具有特定宽度（由布局推断或显式声明）的 div 中，它通常会在生成的替换 DOM 元素中遵循该宽度。 -
@Terry 好主意，我忽略了。但是，我在实现这一点时遇到了一些奇怪的事情。我将它包装在
div中，并设置了width:280px和margin-right:0px，但它仍然显示为好像margin-right是100%。如果我打开 Chrome 开发工具并查看它，Chrome 会告诉我它的边距样式正在被应用，还有shows that it has a margin。我不知道那个利润是从哪里来的。 -
@Sinjai 发生这种情况是因为您没有将包装器
divdisplay设置为inline-block。请设置并检查。 -
@Jithin 做到了。你能发布一个答案来解释为什么这样我可以标记它吗？我不明白为什么这里需要
height和width支持，据我所知，这是inline和inline-block之间的唯一区别。 -
@Sinjai 我已经为你解答了。如果您理解我的回答并且对您有帮助，请标记为答案并投反对票。ty
标签： html css jquery-select2