html - 如何让文本在换行符处对称排列

Question

我有一个 Bootstrap 表，其中包含一个链接和一个很棒的字体图标。

这个 Bootstrap 表也在一个 Bootstrap 列中。如果下一个太长，则会换行，文本会在下一行继续。

但是我希望文本在上面的文本下方直接对齐的地方开始继续。

现在，文本中断并落在最左侧 Font Awesome 图标的下方。

这是我的代码。

<div class="our-story-pt-6">
  <div class="container">
    <h4>More Information</h4>
    <div class="more-info">
      <div class="col-md-6">
        <table class="table">
          <tbody>
            <tr>
              <td class="more-info-link">
                <i class="fa fa-file-text-o"></i>
                <a href="#">Life Sciences Overview</a>
              </td>
            </tr>
            <tr>
              <td>
                <i class="fa fa-file-text-o"></i>
                <a class="text-left" href="#">Transforming Research Operations Through Strategy and Technology Overview</a>
              </td>
            </tr>
            <tr>
              <td>
                <i class="fa fa-file-text-o"></i>
                <a href="#">Commercial Launch Overview</a>
              </td>
            </tr>
            <tr>
              <td>
                <i class="fa fa-file-text-o"></i>
                <a href="#">Webinar: Preparing Your Company for a Successful Commercial Launch</a>
              </td>
            </tr>
            <tr>
              <td>
                <i class="fa fa-file-text-o"></i>
                <a href="#">Supply Chain Management Overview</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col-md-6">
        <table class="table">
          <tbody>
            <tr>
              <td class="more-info-link">
                <i class="fa fa-file-text-o"></i>
                <a href="#">IT Strategy - Emerging Overview</a>
              </td>
            </tr>
            <tr>
              <td>
                <i class="fa fa-file-text-o"></i>
                <a href="#">IT Strategy - Established Overview</a>
              </td>
            </tr>
            <tr>
              <td>
                <i class="fa fa-file-text-o"></i>
                <a href="#">LS Information Management Overview</a>
              </td>
            </tr>
            <tr>
              <td>
                <i class="fa fa-file-text-o"></i>
                <a href="#">Case Studies</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div><!-- end div.more-info -->
  </div><!-- end div.container -->
</div><!-- end div.our-story-pt-6 -->

提前谢谢你。

Answer 1

将您的包裹在单独的 div 中。这将强制 a 标签的任何溢出流到 a 标签本身的开头下方。