我正在尝试将以下按钮和文本框平行放置,左侧的按钮与右侧的文本框平行,我尝试使用跨度和边距,但当前文本框在按钮下方,我该如何做>
<span>
<input type="submit" id="Connect" style="margin-left: 195px; width: 150px;" class="btn action-but" />
<div class="form-group">
@Html.LabelFor(model => model.Service, new { @class = "col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.Service, new { @style = "width: 700px;" })
@Html.ValidationMessageFor(model => model.Service)
</div>
</div>
</span>
最佳答案
如果我了解得很好,您想显示以下内容:
[按钮] [标签文字错误]
要做到这一点,一个简单的方法就是添加样式:display:inline-block;
结果基于您的代码将是这样的
<span>
<input type="submit" id="Connect" style="display: inline-block;margin-left: 195px; width: 150px;" class="btn action-but" />
<div class="form-group" style="display: inline-block;">
@Html.LabelFor(model => model.Service, new { @class = "col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.Service, new { @style = "width: 700px;" })
@Html.ValidationMessageFor(model => model.Service)
</div>
</div>
</span>
您可以在JsFiddle中找到以下示例:http://jsfiddle.net/pR6Wg/