相同的CSS樣式在相同的React組件中給出不同的結果-有解無憂

在我的 React 專案中，我有一個顯示 Book Image 的組件，在 image 下我有幾個按鈕Quantity, Price, Description。我正在應用相同的樣式，但給出不同的Quantity display

我需要在樣式中進行哪些更改以使所有組件的顯示都相同？

謝謝

圖片 - https://ibb.co/fqcQDt9

下面是css檔案

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background: #f1f5f8;
  color: #222;
}

.booklist {
  width: 90vw;
  max-width: 1170px;
  margin: 5em auto;
  display: grid;
  gap: 2rem;
}

@media screen and (min-width: 768px) {
  .booklist {
    grid-template-columns: repeat(3, 1fr);
    /* align-items: start; */
  }
}

.book {
  background-color: white;
  border-radius: 1rem;
  padding: 1rem 2rem;
}

.book h1 {
  margin-top: 0.5rem;
}

.book h4 {
  color: #617d98;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.book p {
  margin-top: 0.5rem;
}

.btn {
  background: var(--clr-primary-5);
  color: var(--clr-white);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);

  font-size: 1rem;

  color: red;
}

.quantity {
  margin-top: 30px;
  margin-left: 180px;
  margin-top: -170px;
}

#decreaseQuantity {
  margin: 20px;
}

.quanityValue {
  margin-top: -45px;
  padding-left: 15px;
}

.price {
  margin-top: 20px;
}

.priceValue {
  padding-left: 100px;
  margin-top: -20px;
}

.button {
  background-color: #4caf50; /* Green */
  border: none;
  color: white;
  padding: 16px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1:hover {
  background-color: white;
  color: black;
  border: 2px solid #4caf50;
}

索引.js

return (
    <article
      className="book"
      onMouseOver={() => {
        console.log(title);
      }}
    >
      <img src={img} alt="" />
      <h1 onClick={() => console.log(description)}>{title}</h1>
      <h4>{author}</h4>
      <button type="button" class="button button1" onClick={clickHandler}>
        Description
      </button>
      <div className="price">
        <button type="button" class="button button1" onClick={viewPrice}>
          {price === 0 ? "View Price" : "Hide Price"}
        </button>
        <h4 className="priceValue">{price > 0 ? <h3>= ${price}</h3> : null}</h4>
      </div>

      <div className="quantity">
        <h3>Quantity</h3>
        <button class="button button1" onClick={increaseQuantity}>
          {" "}
        </button>
        <button
          class="button button1"
          id="decreaseQuantity"
          onClick={decreaseQuantity}
        >
          {"--"}
        </button>
        <button onClick={resetQuantity}>Reset</button>
        <h3 class="quanityValue">{quantity}</h3>
      </div>
    </article>
  );

uj5u.com熱心網友回復：

添加width屬性.book class應該可以解決問題

.book {
   width: 500px;  // Set according to the requirement
}

uj5u.com熱心網友回復：

問題是串列中的每篇文章（“書”類）的寬度都不相同，因此在考慮視口寬度和所需間距時，您的按鈕會環繞在中間專案中以適應空間減少。

編輯：在您的 css .book 屬性中，您需要指定寬度。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/419390.html

標籤：

上一篇：為什么我不能讓這個重繪頁面按鈕出現在它上面的div下方而不是它的頂部？

下一篇：FlexColumn強制隱藏flexbox的初始項