考虑我下面的 HTML 代码，我想将 'site-logo' 和 'nav-search-wrapper' div 元素移动到父 div 元素(即 top-nav)和 'list' 的左侧div 元素到右侧。但它们都并排堆叠在页面左侧。
<!DOCTYPE html>
<html>
<head>
<title>AirBnB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Top Nav -->
<div class="top-nav">
<div class="site-logo">
<a href="index.html" class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg" alt="AirBnB">
</a>
</div>
<div id="nav-search-wrapper">
<form action="#" method="GET">
<input type="text" name="search" id="nav-search" placeholder="Search">
</form>
</div>
<div class="list">
<ul>
<li><a href="">Become A Host</a></li>
<li><a href="">Help</a></li>
<li><a href="">Sign Up</a></li>
<li><a href="">Log In</a></li>
</ul>
</div>
</div>
</body>
</html>
这是我的 CSS。
/* Essential CSS */
body{
padding: 0px;
margin: 0px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #484848;
line-height: 1.43;
}
p{
font-size: 16px;
margin: 0px;
padding: 0px;
}
a: link{
font-size: 16px;
text-decoration: none;
margin: 0px;
padding: 0px;
}
a: visited{
text-decoration: none;
padding: 0px;
margin: 0px;
}
h1, h2, h3, h4, h5, h6, ol, ul, li{
margin: 0px;
padding: 0px;
}
ul, ol{
list-style-type: none;
}
::selection{
color: #fff;
background-color: #333;
}
::-moz-selection{
color: #fff;
background-color: #333;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
/* Top Nav CSS */
.top-nav{
position: fixed;
width: 100%;
height: auto;
border-bottom: 1px solid #ccc;
display: flex;
}
.site-logo{
float: left;
}
.logo:link{
color: #484848;
display: inline-block;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.logo:hover {
background-color: #f1f1f1;
}
.logo:visited{
color: #484848;
}
.logo img{
padding: 12px 18px;
width: 100px;
vertical-align: middle;
border-right: 1px solid #ccc;
}
#nav-search-wrapper{
float: left;
display: inline-block;
width: 490px;
height: 100%;
}
#nav-search-wrapper form input{
box-sizing: border-box;
padding: 22px 10px 18px 52px;
width: 100%;
border: none;
}
#nav-search-wrapper form input::-webkit-input-placeholder{
color: #666;
font-size: 14px;
}
.top-nav .list{
float: right;
border: 1pt solid black;
}
.top-nav .list li{
display: inline-block;
line-height: 52.547px;
}
.top-nav .list ul{
height: 100%;
}
如何使我的“列表”div 元素与父元素的右侧对齐，而其他两个 div 元素与父元素的左侧对齐。
这就是现在出现的样子。 (Airbnb Logo 是这里的填充物。它是一个学习 HTML，CSS 的虚拟元素)
最佳答案
问题出在这里:
.top-nav{
display:flex;
}
除非有一个在您的示例中不明显的 flex 原因，否则只需删除它即可解决问题(列表 div 向右浮动)。
body{
padding: 0px;
margin: 0px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #484848;
line-height: 1.43;
}
p{
font-size: 16px;
margin: 0px;
padding: 0px;
}
a: link{
font-size: 16px;
text-decoration: none;
margin: 0px;
padding: 0px;
}
a: visited{
text-decoration: none;
padding: 0px;
margin: 0px;
}
h1, h2, h3, h4, h5, h6, ol, ul, li{
margin: 0px;
padding: 0px;
}
ul, ol{
list-style-type: none;
}
::selection{
color: #fff;
background-color: #333;
}
::-moz-selection{
color: #fff;
background-color: #333;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
/* Top Nav CSS */
.top-nav{
position: fixed;
width: 100%;
height: auto;
border-bottom: 1px solid #ccc;
}
.site-logo{
float: left;
}
.logo:link{
color: #484848;
display: inline-block;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.logo:hover {
background-color: #f1f1f1;
}
.logo:visited{
color: #484848;
}
.logo img{
padding: 12px 18px;
width: 100px;
vertical-align: middle;
border-right: 1px solid #ccc;
}
#nav-search-wrapper{
float: left;
display: inline-block;
width: 490px;
height: 100%;
}
#nav-search-wrapper form input{
box-sizing: border-box;
padding: 22px 10px 18px 52px;
width: 100%;
border: none;
}
#nav-search-wrapper form input::-webkit-input-placeholder{
color: #666;
font-size: 14px;
}
.top-nav .list{
float: right;
border: 1pt solid black;
}
.top-nav .list li{
display: inline-block;
line-height: 52.547px;
}
.top-nav .list ul{
height: 100%;
}<html>
<head>
<title>AirBnB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Top Nav -->
<div class="top-nav">
<div class="site-logo">
<a href="index.html" class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg" alt="AirBnB">
</a>
</div>
<div id="nav-search-wrapper">
<form action="#" method="GET">
<input type="text" name="search" id="nav-search" placeholder="Search">
</form>
</div>
<div class="list">
<ul>
<li><a href="">Become A Host</a></li>
<li><a href="">Help</a></li>
<li><a href="">Sign Up</a></li>
<li><a href="">Log In</a></li>
</ul>
</div>
</div>
</body>
</html> 关于html - 如何将div元素移动到页面右侧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48489057/