时间戳

首页 > 解决方案 > 如何将第二个“导航栏”div 与第一个“导航栏”div 内联？

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

问题描述

我尝试将 div nav2 与 nav 1 放在同一行，但它只是没有上升问题是什么我什至尝试浮动但它也不起作用

* {
	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”都像普通导航栏一样，但我希望右侧有“nav2”，这就是为什么我将其设为 div“nav2”

标签： htmlcss

解决方案

这可能是您想要做的：

* {
    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>

推荐阅读