时间戳

首页 > 解决方案 > 无法为 div 设置 CSS 样式

html - 无法为 div 设置 CSS 样式

问题描述

我很陌生CSS，无法弄清楚如何将我的所有内容放在div同一级别。我在尝试设置卡片旁边的actual price值（删除discounted price）时遇到问题。它被放置在我不想要的标签下。关于如何改进我的CSS逻辑的任何建议？谢谢。

实际价格出现在标签下方

这是我的代码：

#products {
  padding-top: 3%;
  display:fixed;
  position: inherit;
  margin: 0 auto 0 auto;  
}
#product-content {
  margin-bottom: 5%;
  padding-bottom: 2%;
}
.mat-card-title {
  cursor:pointer;
  white-space: pre-line;
}
#tag {
  float: left;
  position: relative;
  margin-left: 1%;
  width: 6rem;
  text-align: center;
  border-radius: 0.5rem;
  background-color: darkorange;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#category {
  float:left;
  position: relative;
  margin-left: 25%;
  margin-top: -2.6%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
#wishlist {
  float:left;
  position: relative;
  margin-left: 35%;
  margin-top: -3%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  width: 2rem;
  cursor: pointer;
}
#discounted-price{
  float:left;
  position: relative;
  margin-left: 43%;
  margin-top: -2.6%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
#discounted-price {
  float:left;
  position: relative;
  margin-left: 57%;
  margin-top: -2.6%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
#displayOriginalPrice {
  float:left;
  position: relative;
  margin-left: 60%;
  margin-top: -2.6%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
#add-to-cart{
  float:left;
  position: relative;
  margin-top: -3.1%;
  margin-left: 65%;
  padding-top: 0.5%;
  width: 8rem;
  height: 2rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align:center;
  background-color: darkorange;
  color: white;
  border-radius: 0.5rem;
  cursor: pointer;
}
<div class="container" id="products">
  <mat-card
    class="product-content"
    *ngFor="let product of products"
    id="product-content">
    <mat-card-header>
      <mat-card-title (click)="navigate()">{{ product.name }}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <div>
        <div id="tag">{{ product.tags }}</div>
        <div id="category">{{ product.category }}</div>
        <div id="wishlist" (click)="addToWishList(product)">
          <i
            [ngStyle]="{ color: product.isInWishList ? 'yellow' : '' }"
            class="fa fa-star-o fa-2x"
            aria-hidden="true"
          ></i>
        </div>
        <div id="discounted-price">Rs. {{ getDiscountedPrice(product) }}/-</div>
        <div
          id="actual-price"
          *ngIf="product.discountedPerc === 0; else displayOriginalPrice">-</div>
        <ng-template id="displayOriginalPrice" #displayOriginalPrice>{{
          product.actualPrice
        }}</ng-template>
        <div id="add-to-cart">ADD TO CART</div>
      </div>
    </mat-card-content>
  </mat-card>
</div>

标签： htmlcssangular

解决方案

<div class="container" id="products">
      <mat-card
        class="product-content"
        *ngFor="let product of products"
        id="product-content">
        <mat-card-header>
          <mat-card-title (click)="navigate()">{{ product.name }}</mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <div>
            <div id="tag">{{ product.tags }}</div>
            <div id="category">{{ product.category }}</div>
            <div id="wishlist" (click)="addToWishList(product)">
              <i
                [ngStyle]="{ color: product.isInWishList ? 'yellow' : '' }"
                class="fa fa-star-o fa-2x"
                aria-hidden="true"
              ></i>
            </div>
            <div id="discounted-price">Rs. {{ getDiscountedPrice(product) }}/-</div>
            <div
              id="actual-price"
              *ngIf="product.discountedPerc === 0; else displayOriginalPrice">-</div>
            <ng-template  #displayOriginalPrice id="displayOriginalPrice"><div> {{
              product.actualPrice
            }}</div></ng-template>
            <div id="add-to-cart">ADD TO CART</div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>

在 ng 模板中添加 div

推荐阅读