Question

我正在创建一个带有css和html的导航栏。我的列表与主标题一致。我想把它放在屏幕的右侧。我试过浮动：对，但是列表已经关闭了。有什么想法吗？

HTML

<!DOCTYPE html>
   <html>
   <head>
       <link rel="stylesheet" type="text/css" href="style.css">
   </head>
    <body>
        <div class="header">
            <h1 class="title-text"><img class="logoimg" src="logo.png"/>Lindsay Sperring </h1>            
            <ul class="nav-bar">
                <li class="nav-li"><a href="Index.html" class="nav-links">Home</a> </li>
                <li class="nav-li"><a href="#" class="nav-links">Work</a> </li>
                <li class="nav-li"><a href="#" class="nav-links">Blog</a> </li>
            </ul>
        </div>
    </body>
</html>

CSS

h1.title-text {
    color: #ffe401;
    position: relative;
    bottom: 20px;
    display: inline;
}

.header {
    position: fixed;
    background-color: #90cc15;
    width: 500px;
    /* max-height: 70px; */

}

img.logoimg {
    max-width: 50px;
    position: relative;
    top: 15px;
}

ul.nav-bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline;
    position: relative;
    bottom: 30px;
    z-index: 1000;

    /* left: 1000px; */
}

a.nav-links {
    width: 60px;
    color: #ffe401;
}

a.nav-links:hover {
    color: #ffbb01;
}

li.nav-li {
    display: inline;
}

Answer 1

如何简单地添加：

.header{right: 0;}

Answer 2

您编辑的代码...试试这个......让我知道......

 <!DOCTYPE html>
<html>
   <head>
      <style>
         h1.title-text {
         color: #ffe401;
         position: relative;
         display: inline;
         }
         .header {
         position: fixed;
         background-color: #90cc15;
         width: 500px;
         /* max-height: 70px; */
         }
         img.logoimg {
         max-width: 50px;
         position: relative;
         top: 15px;
         }
         ul li{
         display:inline;padding-right:20px;
         }
         ul.nav-bar {
         list-style-type: none;
         display: inline;
         position: relative;
         z-index: 1000;
         /* left: 1000px; */
         }
         a.nav-links {
         width: 60px;
         color: #ffe401;
         }
         a.nav-links:hover {
         color: #ffbb01;
         }
         li.nav-li {
         display: inline;
         }
      </style>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <div class="header" style="background-color:green;">
         <h1 class="title-text"><img class="logoimg" src="logo.png"/>Lindsay Sperring </h1>
         <ul class="nav-bar">
            <li class="nav-li"><a href="Index.html" class="nav-links">Home</a> </li>
            <li class="nav-li"><a href="#" class="nav-links">Work</a> </li>
            <li class="nav-li"><a href="#" class="nav-links">Blog</a> </li>
         </ul>
      </div>
   </body>
</html>

Answer 3

我已将"display: inline"更新为"display: inline-block"并为h1和ul提供宽度，然后将"text-align: right"添加到ul标记。在这里，你可以看到这里;

http://codepen.io/anon/pen/OWayRL

Answer 4

带＆＃39;显示的元素：内联＆＃39;属性没有任何高度宽度，因此您需要将其更改为内联块。尝试这个CSS，它可能会有所帮助：

h1.title-text {
    color: #ffe401;
    display: inline-block;
}
.header {
   background-color: #90cc15;
    width: 500px;
}

img.logoimg {
   max-width: 50px;
   position: relative;
   top: 15px;
}

ul.nav-bar {
    list-style-type: none;
    display: inline-block;
    float: right;
    margin-top: 30px;
}

a.nav-links {
    width: 60px;
   color: #ffe401;
}

a.nav-links:hover {
   color: #ffbb01;
} 

li.nav-li {
    display: inline;
}

右侧浮动时，页面上未显示无序列表

4 个答案: