html - 按钮和文本框未正确对齐

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>

我知道内联 CSS 和 HTML 不是首选，我应该将 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。