我的导航显示在我的徽标下方，需要它在右边

Question

一直在尝试编写一个小型网站设计，并且已经被这个问题困扰了一段时间。我的导航区域在我的示例徽标下方，我需要它在右边，但是，我无法到达那里。我尝试过浮动、绝对定位和使用 col，但我要么做错了，要么不起作用。

我的HTML代码：

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <!-- Logo, Search Bar, Categories, and User Profile -->
        <a href="index.html"> <img height="64px" width="313px" id="logopic" src="images/logoeg.png"> </a> <!-- LogoPic linking to HomePage -->
        <nav>
            <ul>
                <li><a href="#"> Home |</a></li>
                <li><a href="#"> Browse |</a></li>
                <li><a href="#"> Categories |</a></li>
                <li><a href="#"> Rising</a></li>
            </ul>
        </nav>
    </header>
</body>

我的CSS代码：

header{
    background-color: #00829F;
    font-family: system-ui;
    color: white;
    font-size: 34px;
}
#logopic{
    padding-left: 10px;
    padding-bottom: 0px;
    padding-top: 5px;
}
    html, body{
    margin: 0px;
    padding: 0px;
}
ul {
    list-style-type: none;
}
li{
    display: inline;
}
a:link{
    color: white;
    text-decoration: none;
}
a:visited{
    color: white;
    text-decoration: none;
}
a:hover{
    color: white;
    text-decoration: none;
}
a:active{
    color: white;
    text-decoration: none;
}

A picture of my page, showcasing the issue at hand.

Answer 1

给link一个id并将它浮动到左边。然后使用 .nav 并使其正确浮动！有时认为您浮动了正确的标签会让您感到困惑！

Answer 2

可以使用 position:fixed 吗？在你的导航上试试这个。它将导航固定到右边缘和距顶部 8 像素。

position:fixed;
right:0px;
top: -8px;

Answer 3

如果您可以在项目中使用 flexbox，添加这些样式应该可以解决问题。另请参阅随附的代码笔 link.

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: middle;
    padding: 0 20px;
}

a, nav {
  align-self: center;
}

https://codepen.io/shanedaugherty/pen/vpxNLq

Answer 4

要使徽标容器正确浮动，您需要将浮动应用到父容器。您还需要将父项包装在 div 容器中，以便您可以清除导航链接之前的浮动。

header{
    background-color: #00829F;
    font-family: system-ui;
    color: white;
    font-size: 34px;
}

.logoContainer{
  display:block;
  float:right;
}

.clear:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

#logopic{
    padding-left: 10px;
    padding-bottom: 0px;
    padding-top: 5px;
}
    html, body{
    margin: 0px;
    padding: 0px;
}
ul {
    list-style-type: none;
}
li{
    display: inline;
}
a:link{
    color: white;
    text-decoration: none;
}
a:visited{
    color: white;
    text-decoration: none;
}
a:hover{
    color: white;
    text-decoration: none;
}
a:active{
    color: white;
    text-decoration: none;
}

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <!-- Logo, Search Bar, Categories, and User Profile -->
        <div class="clear">
          <a class="logoContainer" href="index.html">
            <img height="64px" width="313px" id="logopic" src="http://via.placeholder.com/313x64">
          </a><!-- LogoPic linking to HomePage -->
        </div>
        <nav>
            <ul>
                <li><a href="#"> Home |</a></li>
                <li><a href="#"> Browse |</a></li>
                <li><a href="#"> Categories |</a></li>
                <li><a href="#"> Rising</a></li>
            </ul>
        </nav>
    </header>
</body>

Answer 5

您可以使用 flex 属性来实现：

使您的页眉灵活。它会自动将您的徽标和导航对齐成一行。要使徽标垂直居中，您可以使用 align-items 居中。

header{
    background-color: #00829F;
    font-family: system-ui;
    color: white;
    display:flex;
    font-size: 34px;
    align-items:center;
    justify-content:space-between;
}

检查我的 Fiddle 以获得更好的想法：JSFiddle

Justify-content 将使您的徽标和导航在它们之间有间距

我的导航显示在我的徽标下方，需要它在右边

My nav is displaying below my logo, need it to the right

html

css

nav