定位导航栏右上角答案

【问题标题】：Position Nav Bar Top Right定位导航栏右上角
【发布时间】：2018-02-10 22:54:56
【问题描述】：

我正在尝试将我的导航栏移动到右上角，而我的徽标在左上角，全部在一条线上。但我无法这样做，我可以使用一些帮助。我是学习 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>

【问题讨论】：

您的徽标在哪里？还是您的header 标签应该是徽标所在的位置？
是的，我的标题标签是徽标应该去的地方

标签： html css

【解决方案1】：

一种方法是使用float。

根据MDN Web Docs 上的文档

float CSS 属性指定元素应放置在其容器的左侧或右侧，允许文本和内联元素环绕它。该元素已从网页的正常流程中移除，但仍保留为流程的一部分（与绝对定位相反）。

Learn more about float

将以下内容添加到您的CSS

.container header {
  float: left;
}

将您的 .container nav 更改为：

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

这会让你得到你想要的......

Working demo

【讨论】：

【解决方案2】：

几个快速而肮脏的方法作为起点：

方法一，使用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>

方法2，使用浮点数：

header {
float: left;
}

nav {
float: right;
}

nav ul {
list-style: none;
padding-top: 18px;
}

nav ul li {
display: inline-block;
margin-right: 5px;
}

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

【讨论】：

【解决方案3】：

你可以使用弹性盒子属性。并左右浮动以对齐您的 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>

【讨论】：

【解决方案4】：

当您想将 div 中的元素对齐在同一行但在不同侧时，请始终使用 float 属性。您可以使用以下 float 属性将标题的位置更改为左侧和导航到右侧：

 .header{   


        float:left;
    }

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

}

【讨论】：

【解决方案5】：

有两种方法。第一个如下所示。

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

【讨论】：