右に浮動小数点のリストが表示されない

cssとhtmlでnav-barを作成しています。私はメインの見出しとインラインでリストを持っています。私はそれを画面の右側に置きたい。私はフロートを試みました：そうですが、リストは画面から外れました。何か案は？右に浮動小数点のリストが表示されない

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; 
}

出典

2017-02-10 Lindsay Sperring

「表示：インライン」とエレメントプロパティは、任意の高さの幅を持っていないので、あなたは、インラインブロックにそれを変更する必要があります。この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; 
}

出典

2017-02-10 08:23:51

何単に追加について：

.header{right: 0;}

出典

2017-02-10 08:08:08 nncho

編集したコードを...これを試してみてください....としましょう私は知っている...

<!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>

出典

2017-02-10 08:16:29 Mahesh

私は"display: inline-block"に"display: inline"を更新し、H1に幅を与え、ULは、ULタグに"text-align: right"を追加しました。こちらをご覧ください。

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

出典

2017-02-10 08:17:29

右に浮動小数点のリストが表示されない

答えて

関連する問題