Question

我正在尝试将导航栏移动到右上方，左上方的徽标全部放在一行上。但我无法这样做，我可以使用一些帮助。我是学习HTML和CSS的新手。导航栏目前位于右上角的名称/徽标下方。

演示

view.setMenuClickCallback(controller.menuButtonCallback);
controller.setNumberClickCallbacks();

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

Answer 1

一种方法是使用float。

在MDN Web Docs

上找到的每份文件

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

Learn more about float

将以下内容添加到.container header { float: left; }

.container nav

将您的.container nav{ height: 70px; line-height: 70px; border: 1px solid green; float: right; }更改为：

import numpy as np
import pandas as pd
import glob
all_data = pd.DataFrame()
for f in glob.glob("*.xlsx"):
    df = pd.read_excel(f)
    all_data = all_data.append(df,ignore_index=True)

# now save the data frame
writer = pd.ExcelWriter('output.xlsx')
all_data.to_excel(writer,'sheet1')
writer.save()

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

Working demo

Answer 2

作为出发点的几种快速而肮脏的方法：

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

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

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

Answer 4

如果要在同一行但不同侧的div中对齐元素，请始终使用 float属性。您可以使用float属性将标题的位置更改为left并导航到右侧，如下所示：

 .header{   


        float:left;
    }

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

}

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

位置导航栏右上角

5 个答案: