CSS在表单标签中不起作用

Question

在razor视图中应用表单标签后，内联CSS无法正常工作。

/* page titles */

hgroup.title {
  margin-bottom: 10px;
}

hgroup.title h1,
hgroup.title h6 {
  display: inline;
}

hgroup.title h6 {
  float: right;
  margin-top: 5px;
  font-weight: normal;
  margin-left: 3px;
}

@model IEnumerable<MvcApplication13.Models.New_Table>
@{
    ViewBag.Title = "Index";
}
@section featured {
        <section class="featured">
            <div class="content-wrapper">
                <hgroup class="title">
                    <h1>Welocome Admin</h1>
                    @using (Html.BeginForm("Index", "Home", FormMethod.Get))
                    {
                        <h6>@Html.TextBox("Search", "", new { style = "width:150px" })<input type="submit" value="Search" /></h6>
                }
                </hgroup>
            </div>
        </section>
}

我希望搜索框位于设计的中间，但它会出现在设计下方。

Answer 1

您应该考虑使用flexbox

hgroup.title {
        margin-bottom: 10px;
        display: flex;
        align-items:center;
        justify-content:center;
    }

    hgroup.title h1, hgroup.title h6 {
        display: inline;
    }

    hgroup.title h6 {
       /* Other css */
    }