Question

考虑我的以下HTML代码，我想移动＆＃39; site-logo＆＃39;和＆＃39; nav-search-wrapper＆＃39; div元素到父div元素的左侧（即top-nav）和＆＃39;列表＆＃39; div元素到右边。但它们都是并排堆叠在页面左侧。

/* 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%;

}

这是我的css。

Install-Package Microsoft.AspNet.WebApi.Cors

如何制作我的＆＃39;列表＆＃39; div元素与右侧对齐，其他两个div元素在父元素的左侧。

这就是现在出现的。（Airbnb Logo是这里的填充物。它是一个用于学习HTML，CSS的虚拟项目）

Answer 1

问题在于：

.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>

Answer 2

您无法在右侧移动div.list，因为您的top-nav是flexbox。您只需从.top-nav class

中删除display:flex;即可

如何将div元素移动到页面的右侧？

2 个答案: