Блог

Главная - Вопросы по программированию - Размещение навигационной панели и заголовка в одной строке

Размещение навигационной панели и заголовка в одной строке

#html #css #header #inline #nav

Вопрос:

Нажмите здесь, чтобы увидеть, как все это выглядит прямо сейчас

Таким образом, в принципе, в настоящее время я пытаюсь поместить как панель навигации, так и заголовок в одну строку (чего я, кажется, каким-то образом добился), но я хочу, чтобы заголовок был слева, а навигация справа, а не спина к спине, как сейчас. Я довольно новичок в html и css, так что извините, что я такой невежественный.

HTML:

 <h4 id="Logo">My Portfolio</h4>

<nav>

  <ul class="navbar">

    <li><a href="Home.html">Home</a></li>
    <li><a href="Education.html">Education</a></li>
    <li><a href="About Me.html">About Me</a></li>
    <li><a href="Contact.html"></a></li>

  </ul>
  
</nav>

CSS:

     *{
background-color: #a989d6;
}

body{margin-left: 10%; 
margin-right: 10%;
margin-top: 2em;}

header{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

h4{
display: inline-block; 
}

.navbar{
display: inline-block;
}

nav a{
text-decoration: none;
}

Комментарии:

1. Я немного смущен плаванием a href и </ul> отсутствием открытия <ul> … чего-то не хватает?

2. да, упс, вставлено в неправильную версию

3. Пожалуйста, обновите существующий вопрос

4. Вот, обновил его.

Ответ №1:

Вы можете обернуть h4 и nav в какой-нибудь общий контейнер и использовать flex с обоснованием содержимого: пробел между

 <div class="container">
<h4 id="Logo">My Portfolio</h4>
<nav class="navbar">
    <a href="Home.html">Home</a>
    <a href="Education.html">Education</a>
    <a href="About Me.html">About Me</a>
    <a href="Contact.html">Contact</a>
  </ul>
</nav>
<div>

и класс CSS для контейнера

 .container {
  display: flex;
  justify-content: space-between;
  align-items:center;
}

Ответ №2:

Вы могли бы использовать макет начальной загрузки 4. Но если нет, то вы можете сделать что-то следующее —

 <div class="parentDiv">
<h4 id="Logo">My Portfolio</h4>
<nav class="navbar">
<a href="Home.html">Home</a>
amp;nbsp;
<a href="Education.html">Education</a>
amp;nbsp;
<a href="About Me.html">About Me</a>
amp;nbsp;
<a href="Contact.html">Contact</a>
</nav>
</div>

и css-это —

 *{
  background-color: #a989d6;
}
body{margin-left: 10%; 


margin-right: 10%;
  margin-top: 2em;}
  header{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
  }



.parentDiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  nav a{
  text-decoration: none;
  }
Метки: