如何在不从图标下方开始的情况下，将文本以直线对齐？

Question

      <td> 
          <span className="support-matrix-page-check-icon" />
          <span className="support-matrix-page-p-small"> I want this text to be on next line but not start from right under icon </span>
</td>

所以我的问题是，下一行“但不能从图标下方开始”应该在“ I”字符下对齐，而不是在检查图标下。如何对齐？

Answer 1

有多种方法可以做到这一点。

两个想法：

1. 将span和position: flex都放入带有.container { display: flex; /* Just for the demo */ width: 200px; }的容器中。

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
  <span class="icon">
    <i class="fa fa-stack-overflow" aria-hidden="true"></i>
  </span>
  <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

span

1. 将position: relative和position: absolute都放入带有padding-left的容器中，将.container { position: relative; padding-left: 25px; /* Just for the demo */ width: 200px; } .icon { position: absolute; left: 0; }添加到图标中，然后将<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="container"> <span class="icon"> <i class="fa fa-stack-overflow" aria-hidden="true"></i> </span> <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div>添加到容器中以将文本向右推送。

required init

import UIKit

class Product: Decodable {
    var category: String = ""
    var material: String = ""

    init() {

    }
}

class TelephoneWithCord: Product {

    var sku: Double
    var isNew: Bool

    private enum CodingKeys: String, CodingKey {
        case sku = "sku"
        case isNew = "isNew"
    }

    required init(from decoder: Decoder) {

        let container = try decoder.container(keyedBy: CodingKeys.self)
        self.sku = try container.decode(Double.self, forKey: .sku)
        self.isNew = try container.decode(Bool.self, forKey: .isNew)
    }
}

let json = """

{
    "category" : "home",
    "material" : "plastic",
    "sku" : 264221,
    "isNew" : true
}

""".data(using: .utf8)!

let telephoneWithCord = try! JSONDecoder().decode(TelephoneWithCord.self, from: json)

telephoneWithCord.category
telephoneWithCord.material
telephoneWithCord.sku
telephoneWithCord.isNew