无论我尝试什么，我似乎都无法将头元素中的除法排列起来，而不是堆叠起来。我希望徽标向左浮动，而社交媒体图标和搜索栏向左浮动。此外，我希望搜索栏图标(放大镜(也与文本区域对齐。
这是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内联对齐，但浮动元素不起作用。我错过了什么！请放心，谢谢。
您可能希望让自己更轻松，并使用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/