Как выровнять элементы заголовка с HTML и SCSS - PullRequest
Новая
       1

Как выровнять элементы заголовка с HTML и SCSS

2 голосов
/ 25 марта 2020

Я хотел бы выровнять элемент h1 с элементом nav в заголовке. Прямо сейчас они появляются в двух разных строках. enter image description here

скрипка 

header {
background-color: #F4C724;
color: white;
text-transform: uppercase;
width: 100%;
align-items: center;
}

Ответы [ 5 ]

1 голос
/ 25 марта 2020

Было несколько вещей, которые вам нужно изменить, поэтому я сделал от вашего имени:

Для правильного выравнивания просмотрите его на полной странице.

Наблюдения:

  1. Вам не нужно объявлять код следующим образом: 

     ul {
  li {
    display: inline-block;
   margin-right: 60px;    
 }
}

Это должно быть примерно так: 

  ul li {
       display: inline-block;
       margin-right: 60px; 
    }

Причина, по которой это было в 2 строки, потому что размер h1 и ширина бара nav были переполнены, поэтому вам нужно увеличить width h1.

Я также вижу, что неправильно comments используется в CSS файле, используйте правильный, в идеале вы должны использовать что-то вроде этого /* .... */

* {
  margin: 0;
  padding: 0;
}

header {
  background-color: #F4C724;
  color: white;
  text-transform: uppercase;
  width: 100%;
}

h2 {
  color: white;
}

body {
  background-image: url("../img/growing.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
}

ul li {
  display: inline-block;
  margin-right: 60px;
}

nav {
  float: right;
  vertical-align: middle;
}

#leftContent {
  width: 60%;
}

h1 {
  font-family: 'Teko', sans-serif;
  color: white;
  border-style: solid;
  text-align: center;
}

span {
  color: #218c74;
}

.nav-link {
  text-decoration: none;
  color: #218c74;
  font-weight: bolder;
  font-size: 12px;
  &:hover {
    color: white;
  }
}

.hero {
  text-align: center;
  width: 50%;
  color: white;
  p {
    text-align: justify;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="">
  <title>Grow Plants</title>
</head>

<body>
  <header>
    <div id="leftContent">
      <h1>How to <span>Grow Plants</span></h1>
    </div>


    <nav>
      <ul>
        <li class="navbutton"><a class="nav-link" href="html/seedling.html">Seedling</a></li>
        <li class="navbutton"><a class="nav-link" href="html/germination.html">Germination</a></li>
        <li class="navbutton"><a class="nav-link" href="html/vegetative.html">Vegetative</a></li>
        <li class="navbutton"><a class="nav-link" href="html/flowering.html">flowering</a></li>
        <li class="navbutton"><a class="nav-link" href="html/about.html">About</a></li>
      </ul>
    </nav>
  </header>
  <section class="hero">
    <h2>Every Man Falls in Love with Mary Jane</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</body>

</html>
0 голосов
/ 25 марта 2020 
Flex solved the problem:


* {
  margin: 0;
  padding: 0;
  //i don't want the default margin and padding settings because it messes with the position of things
}

header {
  background-color: #F4C724;
  color: white;
  text-transform: uppercase;
  width: 100%;
  display: flex;
  justify-contant: space-between;
  align-items: center;
}

h2 {
  color: white;

}

body {
  background-image: url("../img/growing.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  //you have to include two dots so the machine looks for the file outside of the css file
  //it doesn't repeat the img over and over again as the body content extends
  //background-size will size the img to the screen appropropriately
}

ul {
  li {
    display: inline-block;
    margin-right: 60px;
    /*remove browser default settings with 0 for both margin and padding*/
  }
}
nav {
  flex: 0 0 50%;
  max-width: 50%;

}
h1 {
  font-family: 'Teko', sans-serif;
  color: white;
  border-style: solid;
  width: 32%;
  text-align: center;
  span {
    color: #218c74;
  }
}
.nav-link {
  text-decoration: none;
  color: #218c74;
  font-weight: bolder;
  font-size: 12px;
  &:hover {
    color: white;
  }
}
.hero {
  text-align: center;
  width: 50%;
  color: white;
  p {
  text-align: justify;
  //justify reorders all the text to fit in the box evenly
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="">
  <title>Grow Plants</title>
</head>

<body>
  <header>

      <h1>How to <span>Grow Plants</span></h1>

      <nav>
        <ul>
          <li class="navbutton"><a class="nav-link" href="html/seedling.html">Seedling</a></li>
          <li class="navbutton"><a class="nav-link" href="html/germination.html">Germination</a></li>
          <li class="navbutton"><a class="nav-link" href="html/vegetative.html">Vegetative</a></li>
          <li class="navbutton"><a class="nav-link" href="html/flowering.html">flowering</a></li>
          <li class="navbutton"><a class="nav-link" href="html/about.html">About</a></li>
        </ul>
      </nav>
  </header>
  <section class="hero">
    <h2>Every Man Falls in Love with Mary Jane</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</body>

</html>
0 голосов
/ 25 марта 2020

Назначьте классы элементам h1 и nav: 

 <h1 class="header_title">How to <span>Grow Plants</span></h1>

      <nav class="header_nav">
        <ul>
          <li class="navbutton"><a class="nav-link" href="html/seedling.html">Seedling</a></li>
          <li class="navbutton"><a class="nav-link" href="html/germination.html">Germination</a></li>
          <li class="navbutton"><a class="nav-link" href="html/vegetative.html">Vegetative</a></li>
          <li class="navbutton"><a class="nav-link" href="html/flowering.html">flowering</a></li>
          <li class="navbutton"><a class="nav-link" href="html/about.html">About</a></li>
        </ul>
      </nav>

В CSS удалите width из h1 и добавьте: 

.header_title{
  width: 25%;
  float:left;
  background-color: green;
}
.header_nav{
  width: 65%;
  float:left;
  background-color: blue;
}

еще лучшим решением было бы создание обертывающих div элементов вокруг h1 и nav с указанными c идентификаторами, а затем их размер и смещение. Хотя неправильно указывать несколько элементов h1 на одной странице, это возможно, и вы можете иметь несколько элементов navs. Поэтому начните свою работу сейчас, разделив код на четко определенные разделы, и если вам придется вносить изменения в будущем, это будет проще.

0 голосов
/ 25 марта 2020

Измените свойство .header ul и nav css с помощью flexbox. 

header {
  align-items: center;
  background-color: #F4C724;
  display: flex;
  flex-direction: row;
  color: white;
  text-transform: uppercase;
  width: 100%;
  @media (max-width: 767px){
    flex-direction: column;
  }
}
ul {
  display: flex;
  flex-directon: row;
  justify-content: flex-end;
  margin: 0;
  li {
    display: inline-block;
    /*remove browser default settings with 0 for both margin and padding*/
    &:not(:last-child){
      margin-right: 25px;
    }
  }
}
nav {
  margin-left: auto;
  padding-right: 15px;
}

Дизайн понравится.

How it will look like

S CSS изменено. 

* {
  margin: 0;
  padding: 0;
  //i don't want the default margin and padding settings because it messes with the position of things
}

header {
  align-items: center;
  background-color: #F4C724;
  display: flex;
  flex-direction: row;
  color: white;
  text-transform: uppercase;
  width: 100%;
  @media (max-width: 767px){
    flex-direction: column;
  }
}

h2 {
  color: black;
  margin-bottom: 20px;
}

body {
  background-image: url("../img/growing.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  //you have to include two dots so the machine looks for the file outside of the css file
  //it doesn't repeat the img over and over again as the body content extends
  //background-size will size the img to the screen appropropriately
}

ul {
  display: flex;
  flex-directon: row;
  justify-content: flex-end;
  margin: 0;
  li {
    display: inline-block;
    /*remove browser default settings with 0 for both margin and padding*/
    &:not(:last-child){
      margin-right: 25px;
    }
  }
}
nav {
  margin-left: auto;
  padding-right: 15px;
}
h1 {
  font-family: 'Teko', sans-serif;
  color: white;
  border: none;
  width: 32%;
  text-align: center;
  span {
    color: #218c74;
  }
}
.nav-link {
  text-decoration: none;
  color: #218c74;
  font-weight: bolder;
  font-size: 12px;
  &:hover {
    color: white;
  }
}
.hero {
  text-align: center;
  width: 50%;
  color: black;
  padding: 20px;
  p {
  text-align: justify;
  //justify reorders all the text to fit in the box evenly
  }
}
0 голосов
/ 25 марта 2020

Используйте flexbox: 

header {
display: flex;
background-color: #F4C724;
color: white;
text-transform: uppercase;
width: 100%;
align-items: center;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...