Question

我正在尝试移动菜单，以便链接显示在窗口的右侧。当前它们在左侧。

我尝试了很多文本对齐方式：对；对，但似乎都不起作用。

在滚动过程中，我设法使菜单停留在顶部，但是一旦成功，菜单链接就会从中心移到徽标的后面。

这是HTML：

<div id="head" class="sticky">
    <div id="bar">
      <div id="menu" class="sticky">
        <div class="link"><a class="nav-link js-scroll-trigger" href="mailto:system@myrkur.net">Contact</a></div>
        <div class="link"><a class="nav-link js-scroll-trigger" href="https://members.myrkur.net/">System</a></div>
        <div class="link"><a class="nav-link js-scroll-trigger" href="http://wiki.myrkur.net">Wiki</a></div>
        <div class="link"><a class="nav-link js-scroll-trigger" href="https://members.myrkur.net/addalbum.php">Add album</a></div>
      </div>
      <div id="logo" class="sticky">
          <a href="http://www.myrkur.net"><img src="oldie/img/myrkur-logo.jpg" /></a>
    </div>
    </div>
</div>

myrkur.net

这是CSS：

#head {
 background-color:#5F5F5F;
 height:40px;
 position: fixed;
 z-index: 9999;
 width: 100%;
}

#menu{
 display: block;
 margin: 0 auto;
 text-align: right;
 width:100%;
 height:25px;
 background-color:#5F5F5F;
 position: sticky;
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 padding: 5px;
 display: -webkit-box;
 display: -moz-box;
 display: box;
 -webkit-box-align: right;
 -moz-box-align: right;
 box-align: right;
 -webkit-box-pack: right;
 -moz-box-pack: right;
 box-pack: right;
}

#menu .link a{
 float:right;
 padding:4px;
 display:block;
 margin-left:auto;
 margin-right:10px;
 text-decoration:none;
 -webkit-border-radius:0px;
 -moz-border-radius:0px;
 font-family:Tahoma, Geneva, sans-serif;
 font-size:11px;
 color:#aaaaaa;
 font-weight:bold;
 text-shadow:1px 1px 1px #000;
}

#menu .link a:hover{
 background-color:#5F5F5F;
 text-shadow:1px 1px 1px #000;
 border-bottom:solid;
 border-width:1px;
 border-color:#5F5F5F;
}


#bar {
 width:100%;
 height: 10px;
 margin: 0px auto;
 padding:0px;
 padding-top:12px;
 padding-left:75px;
 text-align:right;
 position:sticky;
}

#logo {
 position:absolute;
 top:3px;
 left:65px;
}

#head h1 {
 font-size: 11px;
 text-transform:uppercase;
 text-align: right;
 color: #FAFAFA;
 background-color: #90897a;
 padding:5px 15px;
 margin:0px
}

#head p {
 padding:5px;
 margin:0px;
}

CSS

Answer 1

删除显示：框；显示：-webkit-box;显示：-moz-box;来自#menu的属性。

Answer 2

* {
  margin: 0;
  padding: 0;
}

#head {
  background: #333;
  color: #fff;
  padding: 25px 30px 25px 30px
}

#bar {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
}

#logo img {
  width: 10%
}

#menu {
  text-align: right;
}

#menu li {
  list-style-type: none;
  display: inline-block;
  padding: 0 10px;
}

#menu li a {
  color: #fff;
}

@media only screen and (max-width: 767px) {
  #bar {
    grid-template-columns: auto !important;
    text-align: center !important;
  }
  
  #menu {
    text-align: center !important;
    padding-top: 20px;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="head" class="sticky">
    <div id="bar">
      <div id="logo" class="sticky">
        <a href="http://www.myrkur.net"><img src="oldie/img/myrkur-logo.jpg" /></a>
      </div>
      <ul id="menu" class="sticky">
        <li class="link"><a class="nav-link js-scroll-trigger" href="mailto:system@myrkur.net">Contact</a></li>
        <li class="link"><a class="nav-link js-scroll-trigger" href="https://members.myrkur.net/">System</a></li>
        <li class="link"><a class="nav-link js-scroll-trigger" href="http://wiki.myrkur.net">Wiki</a></li>
        <li class="link"><a class="nav-link js-scroll-trigger" href="https://members.myrkur.net/addalbum.php">Add album</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

我已将图像向左对齐，如果您想使其保持在右侧，则只需更改divs

无法将菜单上的文本对齐到右侧

2 个答案: