将按钮和文本框并行放置答案

【问题标题】：put Button and text box in parallel将按钮和文本框并行放置
【发布时间】：2014-07-21 13:48:42
【问题描述】：

我试图将以下按钮和文本框与左侧的按钮和右侧的文本框平行放置，我尝试使用跨度和边距，但当前文本框位于按钮下方，我应该怎么做那>

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

【问题讨论】：

你能粘贴一个工作演示吗？
这是什么语言？ @Html.LabelFor... - 看起来不像纯 html...
...认为您可能正在寻找这个：getbootstrap.com/components/#input-groups-buttons
@webeno-这是剃须刀，就像 html 助手...
您在寻找this 输出吗？

标签： html css asp.net asp.net-mvc twitter-bootstrap

【解决方案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/

【讨论】：

【解决方案2】：

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

剃刀示例

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

【讨论】：

【解决方案3】：

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

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

DEMO

代码

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

【讨论】：

【解决方案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>

希望对您有所帮助！ =)

【讨论】：

表格不应用于布局目的。
那么，它们有什么用？他从未说过需要什么目的。我知道新的 HTML5 会杀死所有表格并将它们显示为邪恶的恶魔，但对于他想要的东西，这是一种选择。
它们用于表格数据。不多也不少。