如何让CSHTML中锚点标签与表单同排且搜索按钮与输入框合并

1. 调整后CSHTML代码 #

<div class="container">
    <div class="column masthead__join masthead__join_hideInMobile header-action-wrapper">
        <a rel="nofollow"
           href="@Url.Action("New", "Discuss")"
           class="thread-follow button ui-kit-button-medium">
            <span class="button__text">
                New discussion
            </span>
        </a>
        <form class="column search header__search search-group" action="/search.asp" method="get" data-component="search">
            <input id="landing-header-search" class="search__input" type="text" name="searchterm" value="" placeholder="Search Forums Group / Discussion" data-modal-focus data-search-input autocomplete="off" />
            <input type="hidden" name="collections" value="Forum_Group" />
            <button class="button ui-kit-button-medium search-submit-btn" type="submit">
                <span class="button__text">Search</span>
            </button>
        </form>
    </div>              
</div>

仅新增了三个自定义类，未改动原有类的业务逻辑。

2. 新增CSS样式 #

/* 实现新建按钮与搜索表单同排显示 */
.header-action-wrapper {
    display: flex;
    align-items: center;
    gap: 16px; /* 可自行调整两个组件的间距 */
}

/* 实现搜索框与提交按钮合并为一体 */
.search-group {
    display: flex;
    margin: 0;
}
.search__input {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.search-submit-btn {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

如果样式被原有代码覆盖，给选择器加上父级前缀提高优先级即可。

内容的提问来源于stack exchange，提问作者devram