我正在尝试将以下按钮和文本框平行放置,左侧的按钮与右侧的文本框平行,我尝试使用跨度和边距,但当前文本框在按钮下方,我该如何做>

<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/

07-24 09:46
查看更多