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

Question

我正在用 css 和 html 创建一个 nav-bar。我有与主标题内联的列表。我想把它放在屏幕的右侧。我试过 float:right，但列表从屏幕上消失了。有什么想法吗？

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

'display: inline' 属性的元素没有任何高度宽度，因此您需要将其更改为内联块。试试这个 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;
}

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

Unordered List is not showing on page when floated right

html

css

html-lists

css-float