как выровнять заголовок и неупорядоченный список в одной строке

avatar
Heatblast
8 августа 2021 в 19:40
49
3
0

enter image description here

здесь у меня есть портфолио в виде h1 и ссылки на панель навигации в виде неупорядоченного списка. Но как я могу разместить эти предметы точно в указанной позиции? точно соответствует названию портфолио? Помогите пожалуйста

  #navbar h3
    {
        color: gold;
        text-align: center;
        margin-top: 0;
    }
    #navbar ul li
    {
        list-style-type: none;
        padding: 20px;
        font-size: 20px;
        
        margin-right: 15px;
        border-radius: 15px;
    
        
    }
    #navbar ul li a
    {
        text-decoration: none;
        color: white;
    }
    #list
    {
        display: flex;
        flex-direction: row;
        float: left;
        
        justify-content: space-around;
    }
    <nav id="navbar" >
                    <h3>PORTFOLIO</h3>
                    <ul id="list">
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">SKILLS</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
    
                </nav>
Источник
PHP Master
8 августа 2021 в 19:47
0

Отвечает ли это на ваш вопрос? Попытка разместить заголовок и неупорядоченный список в одной строке

Heatblast
8 августа 2021 в 19:55
0

№1, но могу ли я поставить титул в центре? потому что если я последую за тем, что он сам пойдет влево

Ответы (3)

avatar
DELORME Joris
8 августа 2021 в 21:09
0

Я думаю, это должно решить вашу проблему:

PS: flex box может быть бесполезен в этом случае.

nav {
  position: fixed;
  top: 0;
  width: 100%;
}

h3 {
  text-align: center;
}

ul {
  position: absolute ;
  top:0;
  right: 0;
  margin-right:40px;
  margin-top: 20px;
}

li {
  display: inline-block;
}

a {
  text-decoration: none;
  color: #000;
}
<nav id="navbar" >
    <h3>PORTFOLIO</h3>
    <ul id="list">
        <li><a href="#">HOME</a></li>
        <li><a href="#">SKILLS</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>
avatar
Nekromenzer
8 августа 2021 в 21:00
0

#navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#navbar h3 {
display:flex;
justify-content:center;
  color: gold;
  text-align: center;
  margin-top: 0;
}
#navbar div,
h3,
ul {
  width: 33.33%;
}

#list {
  display: flex;
  justify-content: end;
}
#navbar ul li {
  list-style-type: none;
  font-size: 20px;
  margin-left: 35px;
}
#navbar ul li a {
  text-decoration: none;
  color: black;
}
 <nav id="navbar">
      <div></div>
      <h3>PORTFOLIO</h3>
      <ul id="list">
        <li><a href="#">HOME</a></li>
        <li><a href="#">SKILLS</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>

Я добавляю новый пустой элемент div в ваш HTML-код, чтобы упростить задачу. Надеюсь, это решит вашу проблему

avatar
Mihail Stancescu
8 августа 2021 в 20:09
0

Для этого можно использовать flex:

#navbar
{
   display: flex;
}
#navbar h3
    {
        display: flex;
        justify-content: center;
        flex-grow: 1;
    }
    #navbar ul li
    {
      display: flex;
        list-style-type: none;
        align-self: center;
        
        font-size: 20px;
        padding: 0 5px;
        
        border-radius: 15px;
    
        
    }
    #navbar ul li a
    {
        text-decoration: none;
        color: white;
    }
    #list
    {
        display: flex;
        flex-direction: row;
        float: left;
        
        justify-content: space-around;
    }
   <nav id="navbar" >
                    <h3>PORTFOLIO</h3>
                    <ul id="list">
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">SKILLS</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
    
                </nav>