не в состоянии выровнять в одном ряду - PullRequest
Новая
       10

не в состоянии выровнять в одном ряду

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

Мне не удалось выровнять по одной горизонтальной линии оба содержимого. Я использовал flex. Как выровнять как навигационное меню, так и другой флекс-контент? 

const navButton = document.querySelector('button[aria-expanded]');

function toggleNav({
  target
}) {
  const expanded = target.getAttribute('aria-expanded') === 'true' || false;
  navButton.setAttribute('aria-expanded', !expanded);
}

navButton.addEventListener('click', toggleNav);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
}

.wrap {
  width: 100%;
  margin: 0 auto;
}

[aria-controls="menu-list"] {
  display: none;
}

.menu ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 20px auto;
}

.menu ul li {
  flex-grow: 1;
  flex-basis: 1px;
  padding: 10px;
}

.menu ul li a {
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  background: #ffc600;
  padding: 10px;
  color: black;
}

.main {
  width: 100%;
}

.cat1 {
  margin-right: 20px;
  flex: 6;
  background: url(https://jolly-kalam-23776e.netlify.com/restaurantwebsite/images/taco.jpg);
  height: 400px;
  z-index: -1;
}

.c1title {
  z-index: 1;
  color: black;
  background: #ffc600;
  position: absolute;
  top: 130px;
  left: 130px;
  font-size: 30px;
  padding: 5px;
  font-weight: 600;
}

.c1para {
  z-index: 1;
  color: black;
  background: #ffc600;
  position: absolute;
  top: 250px;
  left: 130px;
  font-size: 16px;
  padding: 5px;
  font-weight: 600;
}

.cat {
  flex: 2;
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}

.cat2 {
  flex: 1;
  background: #ffc600;
  margin-bottom: 25px;
  display: flex;
}

.c2title {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  margin: auto;
}

.small {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.cat3 {
  flex: 1;
  background: #ffc600;
  display: flex;
}

.c3title {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  margin: auto;
}

@media (min-width: 900px) {
  .hero {
    width: 90%;
    display: flex;
    margin: 0 auto;
  }
}

@media (max-width: 1000px) {
  .menu {
    perspective: 800px;
  }
  [aria-controls="menu-list"] {
    display: block;
    margin-bottom: 10px;
  }
  .menu ul {
    max-height: 0;
    overflow: hidden;
    transform: rotateX(90deg);
    transition: all 0.5s;
  }
  [aria-expanded="true"]~ul {
    display: grid;
    max-height: 500px;
    transform: rotateX(0);
  }
  [aria-expanded="false"] .close {
    display: none;
  }
  [aria-expanded="true"] .close {
    display: inline-block;
  }
  [aria-expanded="true"] .open {
    display: none;
  }
}
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

<div class="wrap">
  <nav class="menu">
    <button aria-expanded="false" aria-controls="menu-list">
            <span class="open">☰</span>
            <span class="close">×</span>
            Menu
          </button>
    <ul id="menu-list">
      <li><a href="#">Tacos</a></li>
      <li><a href="#">Beers</a></li>
      <li><a href="#">Wines</a></li>
      <li><a href="#">Deserts</a></li>
      <li><a href="#">Reservations</a></li>
    </ul>
  </nav>

</div>

<div class="main">
  <div class="hero">
    <div class="cat1">
      <h6 class="c1title">Terry's Taco Joint</h6>
      <p class="c1para">Pretty Good Tacos!</p>
    </div>
    <div class="cat">
      <div class="cat2">
        <p class="c2title">1.99$<br><span class="small">
                Tacos</span></p>
      </div>
      <div class="cat3">
        <p class="c3title">3.99$
          <br><span class="small">Kombucha</span></p>
      </div>
    </div>
  </div>
</div>

Изображение того, что пыталось выровнять:

navigation menu and content below the navigation menu is not able to align in same row

1 Ответ

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

Вы устанавливаете display: grid на [aria-expanded="true"] ~ ul. Удалите его, и он будет работать нормально. 

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
}


.wrap{
    width: 100%;
    margin: 0 auto;
}
[aria-controls="menu-list"] {
  display: none;
}
.menu ul{
    list-style: none;
    display: flex;
    flex-flow: column no-wrap;
    justify-content: space-between;
    width: 90%;
    margin: 20px auto;
}
.menu ul li{
    flex-grow: 1;
    flex-basis: 1px;
    padding: 10px;
}
.menu ul li a{
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    background: #ffc600;
    padding: 10px;
    color: black;
}

.main{
    width: 100%;
}
.cat1{
    margin-right: 20px;
    flex: 6;
    background: url(https://jolly-kalam-23776e.netlify.com/restaurantwebsite/images/taco.jpg);
    height: 400px;
    z-index: -1;
}
.c1title{
    z-index: 1;
    color:black;
    background: #ffc600;
    position: absolute;
    top: 130px;
    left: 130px;
    font-size: 30px;
    padding: 5px;
    font-weight: 600;
}
.c1para{
    z-index: 1;
    color:black;
    background: #ffc600;
    position: absolute;
    top: 250px;
    left: 130px;
    font-size: 16px;
    padding: 5px;
    font-weight: 600;
}

.cat{
    flex: 2;
    display: flex;
    flex-direction: column;
    
    margin-right: 20px;

}
.cat2{
    flex: 1;
    background: #ffc600;
    margin-bottom: 25px;
    display: flex;
}
.c2title{
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    margin: auto;
}
.small{
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.cat3{
    flex:1;
    background: #ffc600;
    display: flex;
}
.c3title{
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    margin: auto;
}

@media (min-width: 900px){
    .hero{
    width: 90%;
    display: flex;
    margin: 0 auto;
    }
}




@media (max-width: 1000px) {
    .menu {
    perspective: 800px;
  }
  [aria-controls="menu-list"] {
    display: block;
    margin-bottom: 10px;
  }

  .menu ul {
    max-height: 0;
    overflow: hidden;
    transform: rotateX(90deg);
    transition: all 0.5s;
  }

  [aria-expanded="true"] ~ ul {
    max-height: 500px;
    transform: rotateX(0);
  }

  [aria-expanded="false"] .close {
    display: none;
  }

  [aria-expanded="true"] .close {
    display: inline-block;
  }

  [aria-expanded="true"] .open {
    display: none;
  }

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"    type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <title>Restaurant Wesbite</title>
    
</head>
<body>
   <div class="wrap">
       <nav class="menu">
            <button aria-expanded="false" aria-controls="menu-list">
            <span class="open">☰</span>
            <span class="close">×</span>
            Menu
          </button>
           <ul id="menu-list">
               <li><a href="#">Tacos</a></li>
               <li><a href="#">Beers</a></li>
               <li><a href="#">Wines</a></li>
               <li><a href="#">Deserts</a></li>
               <li><a href="#">Reservations</a></li>
           </ul>
       </nav>
       
   </div>
    
    <div class="main">
        <div class="hero">
            <div class="cat1">
               <h6 class="c1title">Terry's Taco Joint</h6>
               <p class="c1para">Pretty Good Tacos!</p>
            </div>
            <div class="cat">
            <div class="cat2">
                <p class="c2title">1.99$<br><span class="small">
                Tacos</span></p>
                </div>
                <div class="cat3">
                <p class="c3title">3.99$
                    <br><span class="small">Kombucha</span></p>
            </div>
            </div>
        </div>
    </div>
    
    
    
    
    <script>
    const navButton = document.querySelector('button[aria-expanded]');

    function toggleNav({ target }) {
      const expanded = target.getAttribute('aria-expanded') === 'true' || false;
      navButton.setAttribute('aria-expanded', !expanded);
    }

    navButton.addEventListener('click', toggleNav);
  </script>
</body>
</html>
...