如何将导航元素定位到右上角

Question

<header class="top-header">
    <div class="container">
        <div class="logo">
            <img src="./dist/img/usjr-logo.png" alt="" href="http://www.usjr.edu.ph" id="logo">
        </div>

        <nav class ="top-nav">
            <ul>
                <li class="current"><a href="index.html">Link A1</a></li>
                <li><a href="">Link A2</a></li>
                <li><a href="">Link A3</a></li>
            </ul>
        </nav>

    </div>
</header>

<nav class="navigation-menu">
    <ul>
        <li><a href="#">Link B1</a></li>
        <li><a href="#">Link B2</a></li>
        <li><a href="#">Link B3</a></li>
        <li><a href="#">Link B4</a></li>
    </ul>
</nav>

这是我的index.html文件的块代码

这是我的css文件：

@import url('https://fonts.googleapis.com/css?family=Nunito|Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
/*@import "heading.css" ; */
/*Main Elements*/
* { -
    margin : 0 ; border: 0; padding: 0; 
}

body { 
    background-color :#ececec; 
    font: 14px/20px'Nunito','sans-serif'; 
    color : #444; margin : 0 ; 
}

.wrapper { 
    margin : 0 auto; 
    width :70%; 
    clear : both; 
}

.container {
    margin-left : 30px;
    margin-right : 30px;
}

img#logo{
    height : 80px;
    width : auto;
    margin : 10px;
}

ul { 
    list-style : none ;
}

nav.top-nav > ul > li {
    display : inline-block; 
}

nav.top-nav > ul > li > a{
    color :#fff;
    text-decoration: none ;
    padding : 30px ; 
    text-align : right ;
}


header.top-header { 
    margin-top : 10px;
    background-color : #FFF;
    height :100px;
}


nav.navigation-menu { 
    background-color : #444;
    color : #fff;
    height : 50px;
}

nav.navigation-menu > ul > li > a {
    color : #FAB301  ;
}

这是一张图片

我想要的是将顶部标题类导航右上角的链接A置于顶部。我该怎么办？

Answer 1

FIDDLE

如果您希望菜单选项一直显示在屏幕的右侧和顶部，请更改以下内容：

nav.top-nav {
  position: absolute;
  right: 0;
  top: 0;
}
nav.top-nav > ul > li > a {
  color: #000;
  text-decoration: none;
  padding: 0 0 0 10px;
  text-align: right;
}

Answer 2

添加：

.top-nav {
  float: right;
}

  

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

     

REF：https://developer.mozilla.org/en/docs/Web/CSS/float?v=example

@import url('https://fonts.googleapis.com/css?family=Nunito|Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

/*@import "heading.css" ; */


/*Main Elements*/

* {
  - margin: 0;
  border: 0;
  padding: 0;
}

body {
  background-color: #ececec;
  font: 14px/20px'Nunito', 'sans-serif';
  color: #444;
  margin: 0;
}

.wrapper {
  margin: 0 auto;
  width: 70%;
  clear: both;
}

.container {
  margin-left: 30px;
  margin-right: 30px;
}

img#logo {
  height: 80px;
  width: auto;
  margin: 10px;
}

ul {
  list-style: none;
}

nav.top-nav>ul>li {
  display: inline-block;
}

.top-nav {
  float: right;
}

nav.top-nav>ul>li>a {
  color: #fff;
  text-decoration: none;
  padding: 30px;
  text-align: right;
}

header.top-header {
  margin-top: 10px;
  background-color: #FFF;
  height: 100px;
}

nav.navigation-menu {
  background-color: #444;
  color: #fff;
  height: 50px;
}

nav.navigation-menu>ul>li>a {
  color: #FAB301;
}

<header class="top-header">
  <div class="container">
    <div class="logo">
      <img src="./dist/img/usjr-logo.png" alt="" href="http://www.usjr.edu.ph" id="logo">
    </div>

    <nav class="top-nav">
      <ul>
        <li class="current"><a href="index.html">Link A1</a></li>
        <li><a href="">Link A2</a></li>
        <li><a href="">Link A3</a></li>
      </ul>
    </nav>

  </div>
</header>

<nav class="navigation-menu">
  <ul>
    <li><a href="#">Link B1</a></li>
    <li><a href="#">Link B2</a></li>
    <li><a href="#">Link B3</a></li>
    <li><a href="#">Link B4</a></li>
  </ul>
</nav>

Answer 3

我绝对会将它放在顶部区域，并使用top: 50%; transform: translateY(-50%));将其垂直居中。

＆＃13;

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Nunito|Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

/*@import "heading.css" ; */


/*Main Elements*/

* {
  - margin: 0;
  border: 0;
  padding: 0;
}

body {
  background-color: #ececec;
  font: 14px/20px'Nunito', 'sans-serif';
  color: #444;
  margin: 0;
}

.wrapper {
  margin: 0 auto;
  width: 70%;
  clear: both;
}

.container {
  margin-left: 30px;
  margin-right: 30px;
}

img#logo {
  height: 80px;
  width: auto;
  margin: 10px;
}

ul {
  list-style: none;
}

nav.top-nav > ul > li {
  display: inline-block;
}

nav.top-nav > ul > li > a {
  color: #fff;
  text-decoration: none;
  padding: 30px;
  text-align: right;
}

header.top-header {
  margin-top: 10px;
  background-color: #FFF;
  height: 100px;
}

nav.navigation-menu {
  background-color: #444;
  color: #fff;
  height: 50px;
}

nav.navigation-menu > ul > li > a {
  color: #FAB301;
}
  
.top-header .container {
    position: relative;
}
  
.top-nav {
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
}

＆＃13;

<header class="top-header">
  <div class="container">
    <div class="logo">
      <img src="./dist/img/usjr-logo.png" alt="" href="http://www.usjr.edu.ph" id="logo">
    </div>

    <nav class="top-nav">
      <ul>
        <li class="current"><a href="index.html">Link A1</a></li>
        <li><a href="">Link A2</a></li>
        <li><a href="">Link A3</a></li>
      </ul>
    </nav>

  </div>
</header>

<nav class="navigation-menu">
  <ul>
    <li><a href="#">Link B1</a></li>
    <li><a href="#">Link B2</a></li>
    <li><a href="#">Link B3</a></li>
    <li><a href="#">Link B4</a></li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;