代码之家 › 专栏 › 技术社区 › Vasantha Kalyani

Flexbox Html CSS设置位置问题[重复]

flexbox css html

-1

Vasantha Kalyani · 技术社区 · 1 年前

我是一名使用html、css-flexbox创建wessite的初学者,我已经使网站标题的宽度达到网站的1000px。标题徽标应从50px开始,导航栏应从600px开始。我尝试过的内容附在下面。它显示出来了,但我写得是否正确,请检查我

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header Design</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .header {
            display: flex;
            width: 1000px;
            background-color: red;
            align-items: center;
            padding: 0 50px; /* Adjust padding to align the logo */
            box-sizing: border-box; /* Ensure padding is included in width */
            height: 100px;
        }
        .logo {
            flex: 0 0 auto;
            font-size: 24px;
            color: black;
        }
        .spacer {
            flex: 0 0 500px; /* Fixed spacer to push the nav */
        }
        .nav {
            display: flex;
            gap: 20px;
        }
        .nav a {
            text-decoration: none;
            color: black;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">Logo</div>
        <div class="spacer"></div>
        <div class="nav">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact Us</a>
        </div>
    </div>
</body>
</html>

1 回复 | 直到 1 年前

Mateen Ali 1 年前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header Design</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center; /* Center the header horizontally */
        }
        .header {
            display: flex;
            width: 1000px;
            background-color: red;
            align-items: center;
            padding: 0 50px; /* Adjust padding to align the logo */
            box-sizing: border-box; /* Ensure padding is included in width */
            height: 100px;
        }
        .logo {
            flex: 0 0 auto;
            font-size: 24px;
            color: black;
        }
        .nav {
            display: flex;
            gap: 20px;
            margin-left: auto; /* Push the nav to the right */
        }
        .nav a {
            text-decoration: none;
            color: black;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">Logo</div>
        <div class="nav">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact Us</a>
        </div>
    </div>
</body>
</html>

.nav容器使用margin left:auto将其向右推,确保导航栏从相对于徽标的固定位置开始。