Блог

Главная - Вопросы по программированию - Ссылки и простая форма в одной строке

Ссылки и простая форма в одной строке

#html #css #forms

#HTML #css #формы

Вопрос:

Я хочу ссылки и простую форму в одной строке

 <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 [______]

Комментарии:

1. Что вы уже пробовали?

2. использование <p></p> для каждого элемента и выполнение встроенного в css

Ответ №1:

так это было необходимо? main контейнер теперь имеет ширину 100%, но вы можете уменьшить расстояние, и тогда объекты будут ближе друг к другу.

 .main {
    display: flex;
    justify-content: space-between;
    width: 100%;
}  
 <div class="main">
 <div class="links">
  <a href="new.php">link1</a>
  <a href="view.php">link2</a>
  <a href="index.html">link3</a>
 </div>

  <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>

Ответ №2:

Самым простым способом может быть обернуть все эти элементы в гибкий 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;
}