时间戳

首页 > 解决方案 > 单行中的链接和简单表单

html - 单行中的链接和简单表单

问题描述

我想要单行的链接和简单的形式

<a href="new.php">link1</a>
<a href="view.php">link2</a>
<a href="index.html">link3</a>

<form method="POST" asp-area="" asp-page="/PagesWithTables/ShowProduktyTable">
    <button type="submit" class="btn btn-default">search</button>       
    <input asp-for="Input.Search" value="@Model.search"/>
</form>

所以看起来像这样

link1 link2 link3   search [______]

标签： htmlcssforms

解决方案

最简单的方法可能是将所有这些元素包装在一个 flex div 中：

<div class="menu">
<a href="new.php">link1</a>
<a href="view.php">link2</a>
<a href="index.html">link3</a>

<form class="my-form" method="POST" asp-area="" asp-page="/PagesWithTables/ShowProduktyTable">
    <button type="submit" class="btn btn-default">search</button>       
    <input asp-for="Input.Search" value="@Model.search"/>
</form>
</div>

CSS：

.menu {
  display: flex
}

.menu a {
  margin: 0 5px;
}

如果要右对齐搜索：

.my-form {
  margin-left: auto;
}

推荐阅读