Ввод <nav> inline с <header> CSS

Прежде всего, я узнал большую часть того, что я знаю о CSS/HTML, используя фреймворки. Я пытаюсь вернуться и изучить основы, чтобы понять селекторов CSS и наследование.Ввод <nav> inline с <header> CSS

Я прочитал на W3C, что оба являются хорошей семантической разметкой для заголовка. Так что я пытаюсь создать заголовок с логотипом, плавающим влево, и навигационное меню поплыло вправо. Проблема в том, что мое навигационное меню сидит прямо под моим заголовком. Я хочу сделать это отзывчивым. Вот что я до сих пор.

<body> 
<header> 
    <h1>Testing</h1> 
     <nav> 
      <ul> 
       <a href=""><li>Home</li></a> 
       <a href=""><li>About</li></a> 
       <a href=""><li>Contact</li></a> 
      </ul> 
     </nav> 
</header>

CSS-выглядит следующим образом

header { 
    position:relative; 
    display:block; 
    max-width:100%; 
    height:100%; 
    margin:0 auto; 
    padding:1rem 5rem; 
    background:#cccccc; 
    color:#fff; 
} 
header h1 { 
    line-height: 45px; 
    font-size: 2rem; 
    margin: 0; 
} 
nav { 
    padding-left: 0; 
    margin-bottom: 0; 
    list-style: none; 
    float:right; 
} 

nav li { 
    position:relative; 
    display:inline-block; 
    list-style-type: none; 
    font-family: "Open Sans", "Droid Sans", Helvetica, Arial, sans-serif; 
    color: #222; 
    padding:0 1rem; 
} 
nav li > a { 
    position: relative; 
    display: block; 
    padding: 10px 15px; 
} 
nav > li > a:hover, 
nav > li > a:focus { 
    text-decoration: none; 
    background-color: #eee; 
}

JSFiddle

источник

2014-08-27 AyeZee33

В чем вопрос? С какими проблемами вы сталкиваетесь? – crush

В чем проблема? –

Попытка добавить фотографию сейчас [ссылка] http://www.cantaloupecreative.info/questions/headerissue.JPG – AyeZee33

Плавающий элемент нав делает родительский контейнер думаю, что не существует, так что эффективно сжимается. Чтобы восстановить поведение вы после этого, добавьте overflow:auto; в header:

header { 
    position:relative; 
    display:block; 
    max-width:100%; 
    height:100%; 
    margin:0 auto; 
    padding:1rem 5rem; 
    background:#cccccc; 
    color:#fff; 
    overflow:auto; 
}

jsFiddle example

Если вы хотите, чтобы они выровнять немного лучше, просто переместить h1 после нав (jsFiddle)

источник

2014-08-27 19:20:01 j08691

Спасибо за ответ. Думаю, я понимаю, что вы говорите. Не могли бы вы также посоветовать мне, как разместить

в заголовке. Я знаю, что могу добавить margin и padding, но есть ли способ сделать его равным H1, который у меня есть в заголовке? Я знаю, что это немного выходит за рамки этого вопроса, но любое направление поможет. – AyeZee33

Равно H1 каким образом? Вы имеете в виду второй пример скрипта в моем ответе? – j08691

Да, inline работал идеально. Спасибо. – AyeZee33

Добавить

display: inline; 
float: left;

к h1 заголовка

header h1 { 
    line-height: 45px; 
    font-size: 2rem; 
    margin: 0; 
    display: inline; 
    float: left; 
}

http://jsfiddle.net/sncb91t8/

Это позволит сделать h1 и навигационный бок о боке Я также добавил

<div style="clear: both"></div>

после нава поэтому серый фон будет охватывать h1 и NAV

источник

2014-08-27 19:25:26 mathius1

Хотел бы я поддержать оба ответа. Отлично. Большое спасибо и @ j08691 – AyeZee33

Вы должны установить отображение inline для и. Обновленное CSS будет:

header h1 { 
    line-height: 45px; 
    font-size: 2rem; 
    margin: 0; 
    display:inline; 
} 
nav { 
    padding-left: 0; 
    margin-bottom: 0; 
    list-style: none; 
    float:right; 
    display:inline; 
}

Вы также можете проверить на сайте: http://jsfiddle.net/2g763j9t/

источник

2014-08-27 19:29:33

В Симл

добавить ниже код в index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

и добавить код ниже в ваш html

<header id="header" style="position: fixed;height: auto; width: 100%; z-index: 9999;" > 
<div class="top-bar"> 

<nav class="navbar navbar-inverse" role="banner" > 
<div class="container"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
<span class="sr-only">Toggle navigation</span> 
<a class="navbar-brand page-scroll " href="#page-top"> </a> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<b>Ngcourse</b> 
<a class="navbar-brand" href="index.html"><img src="images/logo.png" style="height: 64px;" alt="logo"></a> 
</div> 
<div class="collapse navbar-collapse navbar-right"> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#">Home</a></li> 
<li class="active"><a href="#">Videos</a></li> 
<li class="active"><a href="#">Courses</a></li> 
<li class="active"><a href="#">Earning</a></li> 
<li class="active"><a href="#">Youtube</a></li> 
<li class="active"><a href="#">Blogs</a></li> 
<li class="active"><a href="#">Events</a></li> 
<li class="active"><a href="#service" > Our Services</a></li> 
<li class="active"><a href="#about1" >Contact Us </a></li> 
</ul> 
</div> 
</div> 
</nav> 
</div> 
</header>

источник

2017-05-09 18:54:17 ngCourse

Ввод <nav> inline с <header> CSS

ответ

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