时间戳

首页 > 解决方案 > jsx 项目/字符的样式与显示网格 css 水平对齐，这不是我想要的，我希望它像电子商务页面一样显示

css - jsx 项目/字符的样式与显示网格 css 水平对齐，这不是我想要的，我希望它像电子商务页面一样显示

问题描述

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import swapiApi from "../../utils/swapi";

import "./Home.scss";

const Home = () => {
  const [mapPlanets, setMapPlanets] = useState();
  const [movies, setMovies] = useState();
  const [state, setState] = useState(false);
  const [characters, setCharacters] = useState([]);

  useEffect(() => {
   // first api call to get starwars planets
    const planet = () => {
      return swapiApi({
      path: "https://swapi.dev/api/planets/",
      payload: null,
      method: "GET",
    })
    .then((result) => {
      // console.log(result)
      setMapPlanets(result);
      setState(true);
    })
    .catch((err) => console.log(err));
};

  planet();
 }, []);

 const handleChange = (e) => {
  // console.log("Movie Selected!!", e.target.value);
  setMovies(e.target.value);
 };

  return (
    <div className="starwar__container">
      <header>
        <div>
          <Link to="/" className="header__text">
            Star Wars Characters
          </Link>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
      </header>
      <main>
        <hr />
        <div className="starwar__box__align">
          <div>
            <form>
              <label>Filter By:</label>
              <select>
                <option value="">All</option>
                <option value="">Earth</option>
                <option value="">Tatooine</option>
                <option value="">Alderaan</option>
                <option value="">Yavin IV</option>
                <option value="">Bespin</option>
                <option value="">Naboo</option>
                <option value="">Coruscant</option>
              </select>
        </form>
      </div>
      <div>
        <button type="button">Clear all</button>
      </div>
    </div>
    <hr />
    <section>
      <p>All Characters</p>
      <div className="starwar__box__align__center">
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__button">
          <button type="submit">Load More</button>
        </div>
      </div>
    </section>
  </main>
</div>


.starwar__container {
  display: grid;
  grid-template-areas: "header" "main";
  grid-template-columns: 1fr;
  grid-template-rows: 10rem 1fr;
  font-family: "Helvetica Neue";
  height: 100%;
  header {
    grid-area: header;
    padding: 10px 25px 5px;
    .header__text {
      font-style: normal;
      font-weight: 300;
      font-size: 54px;
      line-height: 64px;
      letter-spacing: 0.964286px;
      color: #333333;
      text-decoration: none;
    }
    p {
      font-style: normal;
      font-weight: 300;
      font-size: 22px;
      line-height: 32px;
      letter-spacing: 0.916667px;
      color: #666666;
      max-width: 700px;
    }
    @media only screen and (max-width: 1024px) {
      .header__text {
        font-size: 30px;
        line-height: 40px;
      }
      p {
        font-size: 16px;
        line-height: 15px;
      }
    }
  }
  main {
    grid-area: main;
    padding: 1rem;
    .starwar__box__align {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      padding: 30px;
    }
    button {
      border: 1px solid #002b56;
      box-sizing: border-box;
      background: transparent;
      font-style: normal;
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      text-align: center;
      letter-spacing: 0.857143px;
      text-transform: uppercase;
      color: #002b56;
      padding: 12px 15px;
      cursor: pointer;
    }
    section {
      padding: 0px 0px 0px 30px;
    }
    p {
      font-style: normal;
      font-weight: 300;
      font-size: 34px;
      line-height: 40px;
      letter-spacing: 1px;
      color: #333333;
    }
    .starwar__box__align__center {
      justify-content: center;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      .starwar__card {
        border: 0.1rem #c0c0c0 solid;
        margin: 1.5rem;
        img {
          width: 100%;
          max-width: 29rem;
        }
        .card__body {
          h4 {
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 28px;
            letter-spacing: 1px;
            color: #000000;
          }
          h6 {
            font-style: normal;
            font-weight: normal;
            font-size: 16px;
            line-height: 28px;
            letter-spacing: 1px;
            color: #000000;
          }
          p {
            font-style: normal;
            font-weight: normal;
            font-size: 12px;
            line-height: 16px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: #757575;
          }
        }
        .card__body>* {
          margin-bottom: 0.5rem;
        }
      }
      .starwar__card__button {
        border: 1px solid #002b56;
        box-sizing: border-box;
        border-radius: 2px;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #002b53;
        padding: 12px 25px;
        margin: auto;
        cursor: pointer;
      }
    }
  }
}
import React, { useState, useEffect } from "react"; 
import { Link } from "react-router-dom"; import swapiApi from "../../utils/swapi"; import "./Home.scss"; const Home = () => { const [mapPlanets, setMapPlanets] = useState(); const [movies, setMovies]
= useState(); const [state, setState] = useState(false); const [characters, setCharacters] = useState([]); useEffect(() => { // first api call to get starwars planets const planet = () => { return swapiApi({ path: "https://swapi.dev/api/planets/", payload:
null, method: "GET", }) .then((result) => { // console.log(result) setMapPlanets(result); setState(true); }) .catch((err) => console.log(err)); }; planet(); }, []); const handleChange = (e) => { // console.log("Movie Selected!!", e.target.value); setMovies(e.target.value);
}; return (
<div className="starwar__container">
  <header>
    <div>
      <Link to="/" className="header__text"> Star Wars Characters
      </Link>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
  </header>
  <main>
    <hr />
    <div className="starwar__box__align">
      <div>
        <form>
          <label>Filter By:</label>
          <select>
            <option value="">All</option>
            <option value="">Earth</option>
            <option value="">Tatooine</option>
            <option value="">Alderaan</option>
            <option value="">Yavin IV</option>
            <option value="">Bespin</option>
            <option value="">Naboo</option>
            <option value="">Coruscant</option>
          </select>
        </form>
      </div>
      <div>
        <button type="button">Clear all</button>
      </div>
    </div>
    <hr />
    <section>
      <p>All Characters</p>
      <div className="starwar__box__align__center">
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__card">
          <a href="/ja">
            <img src="" alt="" />
          </a>
          <div className="card__body">
            <h4>Name 2</h4>
            <h6>Homeworld/Planet Name</h6>
            <p>HEIGHT • 100M</p>
            <p>MASS • 100kg</p>
            <p>GENDER • FEMALE</p>
          </div>
        </div>
        <div className="starwar__button">
          <button type="submit">Load More</button>
        </div>
      </div>
    </section>
  </main>
</div>
); }; export default Home;

);
};

export default Home;

标签： csssass

解决方案

推荐阅读