个人中心
gpt4 book ai didi

html - 试图让导航栏与网站标题在同一行

转载 作者：行者123 更新时间：2023-11-28 01:42:09 26 4
gpt4 key购买 nike

这是我在这里的第一篇文章，所以如果我说了一些愚蠢的话，请原谅。我会切入正题。我正在制作一个网站，我试图让我的导航栏与标题在同一行，标题由一条 h1 行和一条位于其下方的 h2 行组成。基本上，我希望它从 way it looks right now 改变对此really cool better-looking方式!

这是我拥有的与导航栏对应的 CSS 代码。虽然，您可能会发现在下面的 fiddle 中检查整个 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;
}

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

附言另外(这完全没有那么重要，所以如果您不想回答也不必担心)，但是一切看起来都不错吗？喜欢布局和配色方案等等？我真的很想确保一切看起来都赏心悦目。我不应该使用蓝色吗？有人告诉我他们不喜欢蓝色。

最佳答案

您可以为此使用 flex。 https://jsfiddle.net/2mtrhwyy/1/

Please view this snippet in full-screen mode

#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>

关于html - 试图让导航栏与网站标题在同一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50382299/

26 4 0
文章推荐： javascript - 将 JQuery 函数更改为 AngularJS
文章推荐： c++ - 如果结构作为递归函数中的参数传递，我如何初始化结构的成员变量？
文章推荐： c++ - 如何更新 boost multi_index_container 的值？
文章推荐： css - 如何删除 Bootstrap 4 网格布局上的列空间？