Question

我正在尝试将div nav2与nav 1放在同一行，但是它只是没有上升，我什至尝试使用float但它也无法正常工作是什么问题

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	width: 100%;
	height: 100vh;
}

#navbar {
	position: fixed;
	width: 100%;
	display: 
	}

#navbar ul {
	list-style: none;
}

#navbar ul li {
	display: inline-block;
	padding: 10px 5px 0px 20px;
 }

 #nav2  {
 	float: right;
 }

<div id="main">
    <div id="navbar">
        <div id="nav1">
            <ul>
                <li>How it works</li>
                <li>Why Company?</li>
                <li>Pricing</li>
                <li>About us</li>
                <li>Resource center</li>
            </ul>
        </div>
        <div id="nav2">
            <ul>
                <li>Get stated</li>
                <li>Log in</li>
            </ul>
        </div>
    </div>
    <div id="head">
        <div>
            <h3>Company</h3>
        </div>
        <div>
            <h1>Invert Like a idiot</h1>
        </div>
        <div>
            <p>because money is lame</p>
        </div>
    </div>
</div>

我希望名称行上的“ nav1”和“ nav2”都像普通的navbar一样，但是我想在右侧显示“ nav2”，为什么我将其设为div“ nav2”

Answer 1

这可能是您想要做的：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100vh;
}

#navbar {
    position: fixed;
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    height: 50px;
}

#nav1 ul, #nav2 ul {
    display: grid;
    grid-gap: 20px;
    grid-auto-columns: minmax(min-contant, max-content);
    grid-auto-flow: column;
    height: 100%;
    align-items: center;
    
    list-style: none;
}

#nav1 ul {
    padding-left: 20px;
    justify-content: left;
}

#nav2 ul {
    padding-right: 20px;
    justify-content: right;
}



#head {
    padding: 50px 20px 0 20px;
}

<html>
<head></head>
<body>
    <div id="main">
        <div id="navbar">
            <div id="nav1">
                <ul>
                    <li>How it works</li>
                    <li>Why Company?</li>
                    <li>Pricing</li>
                    <li>About us</li>
                    <li>Resource center</li>
                </ul>
            </div>
            <div id="nav2">
                <ul>
                    <li>Get stated</li>
                    <li>Log in</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

如何将第二个“导航栏” div与第一个“导航栏” div内联？

1 个答案: