如何将导航栏向左对齐并使内容显示在右侧...无需使用任何框架，如bootstrap或顺风

在前端开发中，可以通过以下步骤将导航栏向左对齐并使内容显示在右侧：

创建一个HTML文件，并使用 <style> 标签来定义样式。

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .navbar {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            background-color: #f1f1f1;
            padding: 10px;
        }

        .navbar ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-grow: 1;
            justify-content: flex-start;
        }

        .navbar ul li {
            margin-right: 10px;
        }

        .navbar ul li:last-child {
            margin-right: 0;
        }

        .content {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </div>
    <div class="content">
        <h1>Welcome to my website!</h1>
        <p>This is the content of my website.</p>
    </div>
</body>
</html>

在样式中，设置 .navbar 的样式为 display: flex;，align-items: center; 和 justify-content: flex-start;，这样可以使导航栏的内容水平对齐，并向左对齐。
使用无序列表 <ul> 来创建导航栏的项，并在每个项之间添加一些间距，以便使它们水平排列。
在样式中，为导航栏的每个列表项设置 margin-right 属性，以便在项之间创建一些间距，并使用 :last-child 选择器去掉最后一个项的右边距。
在页面的其他部分添加内容，比如一个 <div> 元素，并设置合适的 padding，以便与导航栏分隔开来。