如何使用 HTML 和 CSS 让多个元素在顶部相互对齐？

Posted 2023-03-05

【中文标题】如何使用 HTML 和 CSS 让多个元素在顶部相互对齐？

【英文标题】：How do I get multiple elements to align with each other across the top with HTML and CSS?

【发布时间】：2022-01-08 01:43:04

【问题描述】：

我在对齐多个不同元素时遇到了一些问题。我有一个搜索栏、一个下拉框、我的徽标和 4 个导航按钮，我希望我的徽标位于左上角，然后是下拉框和 4 个导航按钮，因此它看起来像 5 个导航按钮和 1 个一个下拉框，然后是我的搜索栏（我将制作它，所以当你输入它时，顶部的功能区的其余部分会消失，因此它是一个大搜索栏，只留下徽标、搜索栏和联系人us 按钮，联系人按钮将位于右上角。 This is what it looks like so far.

@charset "utf-8";

/* CSS Document */

.dropbtn 
  background-color: #D11C1F;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;


.dropdown 
  position: relative;
  display: inline-block;


.dropdown-content 
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;


.dropdown-content a 
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;


.dropdown-content a:hover 
  background-color: #ddd;


.dropdown:hover .dropdown-content 
  display: block;


.dropdown:hover .dropbtn 
  background-color: #5E5A5A;


form 
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;


input 
  all: unset;
  font: 16px system-ui;
  color: #fff;
  height: 100%;
  width: 100%;
  padding: 6px 10px;


::placeholder 
  color: #fff;
  opacity: 0.7;


button 
  all: unset;
  cursor: pointer;
  width: 44px;
  height: 44px;


svg 
  color: #fff;
  fill: currentColor;
  width: 24px;
  height: 24px;
  padding: 10px;


.searchbar 
  display: inline-block;
  float: right;


body 
  margin: 0;
  padding: 0;
  font-size: 15px;



/* Navigation */

nav 
  float: left;
  margin: 0;
  overflow: hidden;
  text-align: center;


nav ul 
  margin: 0;
  padding: 0;


nav ul li 
  display: inline-block;
  list-style-type: none;


nav>ul>li>a 
  color: #aaa;
  display: block;
  line-height: 2em;
  padding: 0.5em 1em;
  text-decoration: none;


.logo-img 
  float: left;
  position: relative;
  margin: 10px 15px 15px 10px;


.bg-div 
  background: white;
  overflow: hidden;

<div class="dropdown">
  <button class="dropbtn">About Us</button>
  <div class="dropdown-content">
    <a href="">Awards</a>
    <a href="Employees.html">Employees</a>
    <a href="">FAQ</a>
    <a href="#">Overview</a>
  </div>
</div>
<div class="searchbar">
  <form id="form" role="search">
    <input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content">
    <button>
                <svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
            </button>
  </form>
</div>

<div class="bg-div">
  <img class="logo-img" src="Assets/Logo Light.png"    ALIGN="CENTER">
  <nav>
    <ul>
      <li><a href="#">Nav 1</a></li>
      <li><a href="#">Nav 2</a></li>
      <li><a href="#">Nav 3</a></li>
      <li><a href="#">Nav 4</a></li>
    </ul>
  </nav>
</div>

【参考方案1】：

只需将您的 about 下拉列表放在 <nav> 中。这将使您的内容显示在一行中。这是它的样子；

<nav>
      <ul>
        <div class="dropdown">
            <button class="dropbtn">About Us</button>
            <div class="dropdown-content">
              <a href="">Awards</a>
              <a href="Employees.html">Employees</a>
              <a href="">FAQ</a>
              <a href="#">Overview</a>
            </div>
          </div>
        <li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
        <li><a href="#">Nav 4</a></li>
        
      </ul>
      
 </nav>