Неупорядоченный список не отображается на странице при поплавке

Я создаю навигационную панель с CSS и html. У меня есть список с основным заголовком. Я хочу поместить его в правую сторону экрана. Я попробовал float: правильно, но список ушел с экрана. Есть идеи?Неупорядоченный список не отображается на странице при поплавке

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" к "display: inline-block" и дать ширину на h1 и уль затем добавляют "text-align: right" к уль тега. Здесь вы можете увидеть здесь;

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

источник

2017-02-10 08:17:29

Неупорядоченный список не отображается на странице при поплавке

ответ

Смежные вопросы