我尝试使用 css display:inline 和 inline-block 排列我的 header 元素，但我没有做任何工作

Question

无论我尝试什么，我似乎都无法让 header 元素内的分区对齐而不是堆叠。我希望徽标向左浮动，而社交媒体图标和搜索栏向左浮动。另外，我希望搜索栏图标（放大镜）也与文本区域对齐。

这里是 HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Maj's Php Project 2022</title>
        
        <!-- Jquery Link -->
        
        <!-- CSS Stylesheet Link -->
        <link href="css/styles.css" rel="stylesheet" type="text/css" />
        
        
        <!-- Bootstrap Links -->
                
        <!-- Metadata Information -->
        
        <!-- Website Comment Information -->
        
    </head>
    
    <body>
       <div id="wrapper">
        <header>
            
            <div id="logo">
            
            </div>
            
            <div id="social-media-icons">
            
                <img src="img/fb.png" />
                <img src="img/fb.png" />
                <img src="img/fb.png" />
                <img src="img/fb.png" />
                
            </div>
            
            <div id="search-bar">
            <img src="img/search.png" width="25px" height="25px" />
            <form action="#" method="POST">
                <input type="text" placeholder="Search" name="search" id="search" />
                <input type="submit" value="GO" name="submit" id="submit" />
            
            </form>
            </div>
            
            
            
            
            
            <nav>
                <ul>
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li>
                </ul>
            </nav>
        
        </header>

这里是 CSS:

   /* GLOBALS */



/* ELEMENT */

    body {
        background-color: white; 

    }
    
    header {
        width: 960px;
        background-color: #336699;
        border-radius: 15px;
        padding: 10px;
        
    }
    
    main {
        background-color: #33FF99;
        border-radius: 15px;
        padding: 10px;
        color: #330099;
    }
    
    li {
        display: inline;
        padding: 5%;
    }
    
    li > a {
        text-decoration:none;
        color: #33CC99;
    }
    
    li > a:hover {
        color: #330066;
    }


    footer {
        background-color: #336699;
        border-radius: 15px;
        padding: 10px;
        color: #33CC99;
    }
    
    header {
        display: inline-block;
        
    }
    
/* IDS */
    
    #wrapper {
        
        border-radius: 15px;
        
        width: 960px;
        clear: both;
        margin: 0 auto;
        padding-top: 5px;
    }
        
    #logo {
        width: 100px;
        height: 100px;
        margin: 5px;
        margin-top: 5px; 
        background-color: white;
        border-radius: 15px;
    }   
    
    #search-bar {
        display: inline;
        float: right;
    }
    
    #social-media-icons {
        float: right;
    }


/* CLASSES */

我需要中的所有 div 以内联对齐，但浮动元素不起作用。我错过了什么！请谢谢。

Answer 1

您可能希望让自己更轻松地使用 Bootstrap 或 Flexbox，因为这些工具可以帮助您满足对齐需求。使用 Bootstrap，您需要包含外部资源，例如 bootstrap css；有了 Flexbox，它就已经存在了。我更喜欢 Flexbox，因为它提供了更多的灵活性。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我使用您的代码模拟了一个简单的示例，并进行了轻微的添加和修改。我还假设您希望社交媒体图标和搜索功能浮动在“右”而不是“左”。如果没有，那很容易改变。

HTML

<body>
  <div id="wrapper">
    <header>
      <div class="header-utility">
        <div id="logo"></div>

        <div class="social-media-icons">
          <img src="img/fb.png" />
          <img src="img/fb.png" />
          <img src="img/fb.png" />
          <img src="img/fb.png" />
        </div>

        <div class="search-bar">
          <form action="#" method="POST">
            <img src="img/search.png" />
            <input type="text" placeholder="Search" name="search" class="search-input" />
            <input type="submit" value="GO" name="submit" id="submit" class="search-submit" />
          </form>
        </div>
      </div>

      <nav>
        <ul>
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li>
        </ul>
      </nav>

    </header>
  </div>
</body>

CSS

/* GLOBALS */



/* ELEMENT */

body {
  background-color: white;
}

header {
  width: 960px;
  background-color: #336699;
  border-radius: 15px;
  padding: 10px;
}

main {
  background-color: #33FF99;
  border-radius: 15px;
  padding: 10px;
  color: #330099;
}

li {
  display: inline;
  padding: 5%;
}

li > a {
  text-decoration: none;
  color: #33CC99;
}

li > a:hover {
  color: #330066;
}

footer {
  background-color: #336699;
  border-radius: 15px;
  padding: 10px;
  color: #33CC99;
}

/* IDS */

#wrapper {
  border-radius: 15px;
  width: 960px;
  clear: both;
  margin: 0 auto;
  padding-top: 5px;
}

#logo {
  width: 100px;
  height: 100px;
  margin: 5px;
  margin-top: 5px;
  background-color: white;
  border-radius: 15px;
}


/* CLASSES */

.header-utility {
  display: flex;
  align-items: center;
}

.social-media-icons {
  flex-grow: 1;
  text-align: right;
  padding-right: 30px;
}

.search-input,
.search-submit {
  padding: 0px;
  height: 25px;
}

随心所欲地使用模拟。 https://jsfiddle.net/9g6ms7pz/

我尝试使用 css display:inline 和 inline-block 排列我的 header 元素，但我没有做任何工作

i tried to line my header elements up using css display:inline and inline-block, but nothing i do works

html

css

inline

css-float