按钮＆amp;文本框未正确对齐

Question

我希望我的文本框和搜索按钮看起来像这样：

--------------------    -------
|    Text Box      |    | BTN |
--------------------    -------

我正在使用此reference。

以下是我的渲染方式：

这是我的 CSHTML：

<div style="display:inline-block; float: right">
    <div style="float:right;">
        @Html.TextBox("date", null, htmlAttributes: new { @class = "form-control datepicker" })
    </div>
    <div style="float:right; margin-right: 10px">
        <input type="submit" value="Search" class="btn btn-primary top-margin" />
    </div>    
</div>

我知道使用HTML的内联CSS不是首选，我应该将CSS与HTML分开，但是现在我只想让它正确呈现，然后我将它分开。

感谢任何帮助。

谢谢。

Answer 1

我认为这就是你想要的。 .example只是一个包装器，你只需要它的内容。

.example {
  width: 50%;
  margin: 50px auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="example">

  <div class="input-group">
    <input type="text" class="form-control" placeholder="text box..." id="search-box" aria-describedby="search-label">
    <label for="search-box" id="search-label" class="input-group-addon btn">Search</label>
  </div>

</div>

注意：我使用了Twitter Bootstrap类，因为您似乎已经在项目中加载了它。这可以在没有Bootstrap的情况下轻松完成，但如果加载Bootstrap则意味着不必要的CSS。

Answer 2

使用表格（带引导程序3）：

<table class="table table-bordered table-hover">
<tbody>
    <tr>
        <td>
            <button type="button" class="btn btn-default">button</button>
        </td>
        <td>
            <input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="">
        </td>
    </tr>
</tbody>