将链接放置在输入框下

Question

所以，我创建了这个网站，您可以在输入下找到链接。我希望将 4 个链接放置在输入下方，例如这样 This image .

 .q-links {
  list-style-type: none;
  display: flex;
  flex-direction: horizonal;
  color: rgb(140, 140, 140);
  
  .search-bar {
    border-radius: 50px;
    border: none;
    padding: 0.75rem 1rem;
    /* Adjust padding for better input size */
    width: calc(100% - 2rem);
    /* Use calc() for responsive width */
    margin: 0.5rem;
    /* Adjust margin for spacing */
    box-sizing: border-box;
    /* Include padding in width calculation */
    width: 60%;
    margin-left: -2em;
    flex-grow: 1;
    box-shadow: 5px 5px 50px #000000;
    z-index: 5;
  }

<header class="nav-bar">

  <img src="Final New RFS Logo 2021-01 (2).png" class="logo" alt="RFS Logo">

  <div style="margin: 0; padding: 0; display: flex; align-items: center; flex-direction: row; width: auto;">

    <input class="search-bar" type="text" placeholder="Search Anything at RFS">

    <ul class="q-links">
      <li>Students</li>
      <li>Staff</li>
      <li>Parents</li>
      <li>Alumni</li>
    </ul>
  </div>

我希望它在输入下有 4 个链接，而不是像这样

此外，我不确定要添加或删除哪些 HTML 才能将所有链接置于输入下方，而且我从来没有尝试过弯曲，最终改变了输入形状并对其进行了调试。

Answer 1

<!DOCTYPE html>
<html>
<head>
<style>
.nav-bar {
  display: flex;
  
  align-items: center;
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  height: 50px; /* Adjust height as needed */
}

.nav-content {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.q-links {
  list-style-type: none;
  display: flex;
  flex-direction: row; /* Change to row */
  color: rgb(140, 140, 140);
  margin-left: 1rem; /* Adjust margin as needed */
}

.q-links li {
  margin-right: 1rem; /* Adjust margin as needed */
}

.search-bar {
  border-radius: 50px;
  border: none;
  padding: 0.75rem 1rem;
  margin: 0.5rem;
  box-sizing: border-box;
  flex-grow: 1;
  box-shadow: 5px 5px 50px #000000;
  z-index: 5;
}
</style>
</head>
<body>

<header class="nav-bar">
  <img src="Final New RFS Logo 2021-01 (2).png" class="logo" alt="RFS Logo">

  <div class="nav-content">
    <input class="search-bar" type="text" placeholder="Search Anything at RFS">

    <ul class="q-links">
      <li>Students</li>
      <li>Staff</li>
      <li>Parents</li>
      <li>Alumni</li>
    </ul>
  </div>
</header>
</body>
</html>

将链接放置在输入框下

问题描述投票：0回答：1

1个回答

最新问题

将链接放置在输入框下

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1