Question

这是我在这里的第一篇文章，所以如果我说些傻话，请原谅。我会切入追逐。我正在建立一个网站，我正在尝试让我的导航栏与标题位于同一行，该标题由一条h1线和一条h2线组成。基本上，我希望它从way it looks right now更改为此really cool better-looking方式！

这是我对应导航栏的CSS代码。虽然，您可能会发现在下面的小提琴中查看整个HTML和CSS代码会更容易。（由于预览的宽度在jsfiddle中有多小，但导航栏的所有都是软弱的，但这可能是预期的）

https://jsfiddle.net/2mtrhwyy/

#navul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;    
}

#navli {
    float: left;
}

#navli a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

非常感谢任何提前查看我的问题的人！

P.S。另外（这完全不那么重要，所以如果你不想回答也不要担心），但一切看起来都不错吗？像布局和配色方案和一切？我真的想确保一切看起来都很悦目。我不应该用蓝色吗？有人告诉我他们不喜欢蓝色。

Answer 1

我认为有两种方法可以实现这一目标：1。CSS Grid，2。Bootstrap。

我个人推荐Bootstrap，因为它更简单。

您可以将徽标放在导航栏中，然后根据需要调整大小。

Answer 2

你可以使用flex。 https://jsfiddle.net/2mtrhwyy/1/

请以全屏模式查看此代码段

#first, h1 {
	font-family: 'Raleway', sans-serif;
	text-align: left;
	opacity: 1;
	font-size: 40px;
	margin-bottom: 0em;
	padding-bottom: 0em;
    color: #444444;
    display: inline;
}

#second, h1 {
	font-family: 'Raleway', sans-serif;
	text-align: left;
	opacity: 1;
	font-size: 40px;
	margin-bottom: 0em;
	padding-bottom: 0em;
    color: #4186C4;
    display: inline;
}

h2 {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 28px;
    color: #4186C4;
}

p, li {
	font-family: 'Source Sans Pro', sans-serif;
}

div ul {
    text-align: center;
	// margin-left: -15px;
	padding-top: 1em;
}

div ul li {
	display: inline;
	list-style-type: none;
	margin-left: 20px;
}

div ul li:first-child {
margin-left: 0px;
}

div a {
	color: inherit;
}

body {
	margin: 50px 50px;
	background-color: #fdfdfd;
    // background-image: url("bnb.png");
    // background-size: 10%;
}

h3 {
    font-family: 'Source Sans Pro', sans-serif;
    text-align: left;
    font-size: 24px;
    border-bottom: solid 0px;
    padding-bottom: 1em;
    margin-left: 0em;
    margin-top: 0.4em;
    color: #444444;
}

#navul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;    
}

#navli {
    float: left;
}

#navli a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navli a:hover:not(.active) {
    background-color: #ddd;
}

#navli a.active {
    color: white;
    background-color: #4186C4;
}

.active {
    background-color: #4186C4;
}

.flex-container {
  display: flex;
    justify-content: space-between;
}

<html>

  <head>

  	  <script src="https://use.fontawesome.com/9f8fba671c.js"></script>

	  <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
	  <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
	  <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
	  <link rel="manifest" href="/assets/favicons/manifest.json">
	  <link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
	  <meta name="theme-color" content="#0094ff">

	  <meta charset="utf-8">
	  <title>Christopher Trinh</title>
	  <link rel="stylesheet" type="text/css" href="main.css">

	  <link href="https://fonts.googleapis.com/css?family=Raleway:800" rel="stylesheet">
	  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">


  </head>

  <body>
  
    <div class="flex-container">
      <div>
      	  <h1 id="first">Christopher<span id="second">Trinh</span>  </h1>
      <h3>Programmer / Writer / Optimist</h3>
      
      </div>
           <nav>
          <ul id="navul">
            <li id="navli"><a class="active" href="index.html">Home</a></li>
            <li id="navli"><a href="#">Projects</a></li>
            <li id="navli"><a href="https://ctrinh98.github.io/blog/">Blog</a></li>
            <li id="navli"><a href="#">Resume</a></li>
          </ul>
      </nav>
    </div>


      

      
	  <h2>About Me</h2>
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae commodo magna, gravida tempor velit. Nam in velit auctor, tempor erat at, commodo urna. Curabitur vitae magna accumsan, imperdiet felis ac, varius justo. Praesent aliquam leo quis enim ornare, vitae posuere mi consequat. Ut diam ipsum, vulputate quis nisl id, eleifend facilisis ante. Donec vestibulum est vitae sem malesuada, sit amet faucibus tellus sagittis. Morbi fringilla in tortor ac placerat. Donec auctor vel augue vitae cursus. Suspendisse nulla metus, elementum et luctus vitae, maximus quis diam. Etiam ut congue est. Nam ut rhoncus lacus, eget pellentesque lacus. Sed auctor ut magna sed viverra. Quisque maximus hendrerit porttitor. Sed consectetur eros lectus, ut interdum orci laoreet vitae. Fusce a fringilla elit. Donec neque neque, cursus a malesuada nec, tincidunt sed sapien.</p>
      
      <h2>Experience</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae commodo magna, gravida tempor velit. Nam in velit auctor, tempor erat at, commodo urna. Curabitur vitae magna accumsan, imperdiet felis ac, varius justo. Praesent aliquam leo quis enim ornare, vitae posuere mi consequat. Ut diam ipsum, vulputate quis nisl id, eleifend facilisis ante. Donec vestibulum est vitae sem malesuada, sit amet faucibus tellus sagittis. Morbi fringilla in tortor ac placerat. Donec auctor vel augue vitae cursus. Suspendisse nulla metus, elementum et luctus vitae, maximus quis diam. Etiam ut congue est. Nam ut rhoncus lacus, eget pellentesque lacus. Sed auctor ut magna sed viverra. Quisque maximus hendrerit porttitor. Sed consectetur eros lectus, ut interdum orci laoreet vitae. Fusce a fringilla elit. Donec neque neque, cursus a malesuada nec, tincidunt sed sapien.</p>
      
	  
	  <h2>Major Projects</h2>
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae commodo magna, gravida tempor velit. Nam in velit auctor, tempor erat at, commodo urna. Curabitur vitae magna accumsan, imperdiet felis ac, varius justo. Praesent aliquam leo quis enim ornare, vitae posuere mi consequat. Ut diam ipsum, vulputate quis nisl id, eleifend facilisis ante. Donec vestibulum est vitae sem malesuada, sit amet faucibus tellus sagittis. Morbi fringilla in tortor ac placerat. Donec auctor vel augue vitae cursus. Suspendisse nulla metus, elementum et luctus vitae, maximus quis diam. Etiam ut congue est. Nam ut rhoncus lacus, eget pellentesque lacus. Sed auctor ut magna sed viverra. Quisque maximus hendrerit porttitor. Sed consectetur eros lectus, ut interdum orci laoreet vitae. Fusce a fringilla elit. Donec neque neque, cursus a malesuada nec, tincidunt sed sapien.</p>
	  
	  <!-- <h2>Get In Touch</h2> -->
	  <div>
	    <ul>
	  	  <li><i class="fa fa-github fa-2x"></i></li>
	  	  <li><i class="fa fa-linkedin-square fa-2x"></i></li>
	  	  <li><i class="fa fa-envelope fa-2x"></i></li>
	    </ul>
	  </div>
	
  </body>

</html>

试图让导航栏与网站标题位于同一行

2 个答案: