我試著把我的導航欄移到右上角，而我的logo在左上角，都在一行上。但我不能這樣做，我可以使用一些幫助。我是學習HTML和CSS的新手。導航欄目前位于右上角的名稱/徽標下方。

演示

.container{
        	padding: 40px 40px 40px 40px;
        	margin: 10px 10px 10px 10px;
        	position: relative;
        	display: block;
        	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
            text-align: left;
        	border: 1px solid blue;
        	color:white;
        }
        
        .container h1{	
        	text-align: left;
        	font-size: 50px;
        }
        
        .container nav{
           height: 70px;
           line-height: 70px;
           border: 1px  solid green;
        	
        }
        
        .container nav ul {
            list-style: none;
            width: 100%;
            border: 1px solid red;
            text-align:right
         }
        
        .container nav ul li {
          display: inline-block;
          font-size: 100%;
          color:white;	
          margin-right: 0;
          border : 1px solid yellow;
         }

<div class="container">
      <header>
        <h1>Srikanth Gowda</h1>
      </header>
    	
    <nav class="navbar">
    	<ul>
    		<li>Design</li>
    		<li>Photography</li>
    		<li>About</li>
    		<li>Contact</li>
    		<li>Blog</li>
    	</ul>
    </nav>
    </div>

一種方法是使用float。

根據MDN Web文檔上的文檔

浮動CSS屬性指定一個元素應該放在它的容器的左側或右側，允許文本和行內元素環繞它。該元素從網頁的正常流程中移除，但仍然是流程的一部分(與絕對定位相反)。

了解有關float的更多信息

將以下內容添加到您的CSS中

.container header {
  float: left;
}

改變你的。集裝箱導航至:

.container nav{
   height: 70px;
   line-height: 70px;
   border: 1px  solid green;
   float: right;
}

這會讓你得到你想要的...

工作演示

幾個快速而骯臟的方法作為起點:

方法1，使用flexbox:

.container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-right: 20px;
}

<div class="container">
      <header>
        <h1>Srikanth Gowda</h1>
      </header>

    <nav class="navbar">
        <ul>
            <li>Design</li>
            <li>Photography</li>
            <li>About</li>
            <li>Contact</li>
            <li>Blog</li>
        </ul>
    </nav>
    </div>

您可以使用flex box屬性。并左右浮動來對齊div

.container{
        	
        	position: relative;
        	display: block;
        	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
           height:70px;
        	border: 1px solid blue;
        	color:blue;
        }
        
        .container h1{	
        	
          
        	font-size: 50px;
        }
        
        .container .navbar{
          
           height: auto;
           line-height: auto;
           border: 1px  solid green;
        	  float:right;
        }
        
        .container .navbar ul {
            list-style: none;
            width: auto;
            border: 1px solid red;
            
         }
        
        .container .navbar ul li {
          display: inline;
          font-size: 100%;
          color:blue;	
          
          border : 1px solid yellow;
         }
         .header{
         float:left;
         }
         
         .d1{
         float:clear;
          height:100px;
          width:1000px;
         }

<div class="container">
      <div class="header">
        <h4>Srikanth Gowda</h4>
      </div>
    	
      <div class="navbar">
        <ul>
          <li>Design</li>
          <li>Photography</li>
          <li>About</li>
          <li>Contact</li>
          <li>Blog</li>
        </ul>
      </div>
       
</div>
   
    <div>
    <div class="d1">
    rest of your content
    eferfer
    </div></div>

當您想要對齊div中同一行不同側的元素時，請始終使用float屬性。您可以使用float屬性將頁眉的位置更改為左，將nav更改為右，如下所示:

.header{   


        float:left;
    }

.container nav{
   height: 70px;
   line-height: 70px;
   border: 1px  solid green;
   float: right;

}

有兩種方法。下面給出第一個。

.container header{
       display:inline-block;
       float:left;
    }

    .navbar{
       display:inline-block;
       float:right;
    }

第二種方法是你可以把它們放在一個表格里，如下圖所示。

<div class="container">
       <table>
       <tr>
          <td>
              <header>
                <h1>Srikanth Gowda</h1>
              </header>
            </td>
            <td>
            <nav class="navbar">
                <ul>
                    <li>Design</li>
                    <li>Photography</li>
                    <li>About</li>
                    <li>Contact</li>
                    <li>Blog</li>
                </ul>
            </nav>
         </td>
       </tr>
       </table>
        </div>