Question

我试着将下面的按钮和文本框并排放在左边的按钮和右边的文本框中，我尝试使用span和margin但是当前文本框在按钮下面，我该怎么办该＆GT;

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

Answer 1

如果我理解你想要展示这样的东西： [按钮] [标签文字错误]

要做到这一点，一种简单的方法是添加样式： 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/

Answer 2

我认为你正在寻找垂直形式。看一下这个例子bootstrap vertical form

Razor示例

<form class="form-inline" role="form">
  <div class="form-group">
     <button type="submit" class="btn btn-default">Sign in</button>
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
       @Html.TextBoxFor(model => model.Service, new { @class="form-control", @placeholder="Enter email" })
    </div>
  </div>
</form>

Answer 3

删除margin-left: 195px提交按钮，在.col-md-2之前添加label内的<。}}。

并将<div class="col-md-10">更改为<div class="col-md-8">

DEMO

CODE

<span>

    <div class="form-group">
      <div class="col-md-2">
        <input type="submit" id="Connect"  style=" width: 150px;" class="btn  action-but" />
      </div>
        @Html.LabelFor(model => model.Service, new { @class = "col-md-2" })
        <div class="col-md-8">
            @Html.TextBoxFor(model => model.Service, new { @style = "width: 700px;" })
            @Html.ValidationMessageFor(model => model.Service)
        </div>
    </div>
</span>

Answer 4

为什么不使用桌子？或者你想用div做它？

<table class="col-md-10">
     <td>
           <tr>
               @Html.TextBoxFor(model => model.Service, new { @style = "width: 700px;" })
           </tr> 
     </td>
     <td>
           <tr>
               @Html.ValidationMessageFor(model => model.Service)
           </tr> 
     </td>         
</table>

希望它有所帮助！ =）

将Button和文本框并行放置

4 个答案: