Выровнять содержимое по левому краю с помощью гибкого блока на боковой панели - PullRequest
Новая
       8

Выровнять содержимое по левому краю с помощью гибкого блока на боковой панели

1 голос
/ 13 июля 2020

Я новичок в HTML5 и CSS3, и извините, если заголовок не очень информативный. Я делаю портфолио с нуля, а пока создаю структуру, чтобы добавить контент позже.

Я следил за инструкцией по созданию боковой панели, используя только CSS с flexbox. Я делаю страницу Mobile First, поэтому мне пришлось изменить исходный код, чтобы он соответствовал моим требованиям. Мой приоритет сейчас - заставить боковую панель работать на рабочем столе.

Ожидаемый результат состоит в том, что, когда я наводю курсор на значки боковой панели, появляется боковая панель, включающая как исходный значок, так и текст (например, значок дома и «домашний» текст (примеры я приведу позже)). Однако я не могу выровнять значок по левому краю, а текст занимает всю строку.

Вот мой фактический результат (я изменил загруженный здесь код, поэтому, пожалуйста, не обращайте внимания на цвета):

Actual result

This is the expected result (corrected in Paint):

image 

.title{
  display: inline-block;
}

/*Main Container (body)*/
.main-container{
  font-family: Roboto, Arial;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

header .title{
  margin: 5% 5%;
}

main{
  margin: 1% 3%;
}

/*Categories*/
.home-categories{
  display: inline-block;
  text-align: center;
  padding: 2% 0;
  margin-bottom: 5%;
  width: 100%;
}

.home-categories-img{
  width: 95%;
}

.navbar{
  position: fixed;
  background-color: #525252;
  transition: width 600ms ease;
  overflow: auto;
  bottom: 0;
  height: 3rem;
  width: 100vw;
}

.navbar-nav{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}

.nav-item{
  width: 100%;
}

.nav-link {
  display: flex;
  align-items: center;
  height: 5rem;
  text-decoration: none;
  justify-content: center;
  font-size: 200%;
}

.link-text {
  font-family: Roboto, Arial;
  display: none;
  margin-left: 1rem;
}

footer{
  padding: 5%;
}

/*LARGE SCREEN VIEW*/
@media screen and (min-width: 748px){

  header .title{
    margin: 2% 5%;
    margin-left: 10%;
  }

  /*Content Container (main)*/
  .main-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 1% 5%;
    margin-left: 10%;
  }

  /*Categories*/
  .home-categories{
    flex: 0 1 48%;
    margin: 0 1% 5% 1%;
  }

  .home-categories:nth-child(even){
    margin-top: 15%;
    margin-bottom: 0;
  }

  .home-categories:nth-child(odd){
    margin-bottom: 15%;
  }

  .navbar{
    top: 0;
    width: 4rem;
    height: 100%;
  }

  .navbar-nav{
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
  }

  .navbar:hover{
    width: 16rem;
  }

  .navbar:hover .link-text{
    display: inline;
  }

  footer{
    margin-left: 4rem;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>page name</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body class="main-container">
    <header>
        <a href="index.html">
            <h1 class="title">page name</h1>
        </a>
        <nav class="navbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="" class="nav-link">
                        <i class="fa fa-home fa-fw" aria-hidden="true">
                            <span class="link-text">Home</span>
                        </i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="" class="nav-link">
                        <i class="fa fa-address-card fa-fw" aria-hidden="true">
                            <span class="link-text">About</span>
                        </i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="" class="nav-link">
                        <i class="fa fa-paper-plane fa-fw" aria-hidden="true">
                            <span class="link-text">Contact</span>
                        </i>
                    </a>
                </li>
            </ul>
        </nav>
    </header>
    <main class="main-wrapper">
        <article class="home-categories">
            <a href="">
                <img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Website image">
                <h2>Websites</h2>
            </a>
        </article>

        <article class="home-categories">
            <a href="">
                <img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Games image">
                <h2>Games</h2>
            </a>
        </article>

        <article class="home-categories">
            <a href="">
                <img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Apps image">
                <h2>Apps</h2>
            </a>
        </article>

        <article class="home-categories">
            <a href="">
                <img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Art image">
                <h2>Art</h2>
            </a>
        </article>
    </main>
    <footer>
        <p><a href="">mail</a></p>
        <p><a href="">Link</a></p>
    </footer>
    <script src="" defer></script>
</body>

</html>

1 Ответ

0 голосов
/ 13 июля 2020

Не следует встраивать тег <span> в тег <i>, потому что когда вы применяли стиль к .nav-link, тег span обрабатывался как дочерний элемент тега <i>. 

.title {
  display: inline-block;
}


/*Main Container (body)*/

.main-container {
  font-family: Roboto, Arial;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

header .title {
  margin: 5% 5%;
}

main {
  margin: 1% 3%;
}


/*Categories*/

.home-categories {
  display: inline-block;
  text-align: center;
  padding: 2% 0;
  margin-bottom: 5%;
  width: 100%;
}

.home-categories-img {
  width: 95%;
}

.navbar {
  position: fixed;
  background-color: #525252;
  transition: width 600ms ease;
  overflow: auto;
  bottom: 0;
  height: 3rem;
  width: 100vw;
}

.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}

.nav-item {
  width: 100%;
}

.nav-link {
  display: flex;
  align-items: center;
  height: 5rem;
  text-decoration: none;
  justify-content: center;
  font-size: 200%;
}

.link-text {
  font-family: Roboto, Arial;
  display: none;
  margin-left: 1rem;
}

footer {
  padding: 5%;
}


/*LARGE SCREEN VIEW*/

@media screen and (min-width: 748px) {
  header .title {
    margin: 2% 5%;
    margin-left: 10%;
  }
  /*Content Container (main)*/
  .main-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 1% 5%;
    margin-left: 10%;
  }
  /*Categories*/
  .home-categories {
    flex: 0 1 48%;
    margin: 0 1% 5% 1%;
  }
  .home-categories:nth-child(even) {
    margin-top: 15%;
    margin-bottom: 0;
  }
  .home-categories:nth-child(odd) {
    margin-bottom: 15%;
  }
  .navbar {
    top: 0;
    width: 4rem;
    height: 100%;
  }
  .navbar-nav {
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
  }
  .navbar:hover {
    width: 16rem;
  }
  .navbar:hover .link-text {
    display: inline;
  }
  footer {
    margin-left: 4rem;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body class="main-container">
  <header>
    <a href="index.html">
      <h1 class="title">page name</h1>
    </a>
    <nav class="navbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="" class="nav-link">
            <i class="fa fa-home fa-fw" aria-hidden="true"></i>
            <span class="link-text">Home</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">
            <i class="fa fa-address-card fa-fw" aria-hidden="true"></i>
            <span class="link-text">About</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">
            <i class="fa fa-paper-plane fa-fw" aria-hidden="true"></i>
            <span class="link-text">Contact</span>
          </a>
        </li>
      </ul>
    </nav>
  </header>
  <main class="main-wrapper">
    <article class="home-categories">
      <a href="">
        <img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Website image">
        <h2>Websites</h2>
      </a>
    </article>

    <article class="home-categories">
      <a href="">
        <img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Games image">
        <h2>Games</h2>
      </a>
    </article>

    <article class="home-categories">
      <a href="">
        <img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Apps image">
        <h2>Apps</h2>
      </a>
    </article>

    <article class="home-categories">
      <a href="">
        <img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Art image">
        <h2>Art</h2>
      </a>
    </article>
  </main>
  <footer>
    <p><a href="">mail</a></p>
    <p><a href="">Link</a></p>
  </footer>
...