如何在换行符时将文本对称排列

时间:2015-11-10 14:06:24

标签: html css twitter-bootstrap

我有一个引导表,其中包含一个链接和一个字体真棒图标。

此引导表也位于引导列中。当下一个太长时,会出现换行符,并且文本会在下一行继续。

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

现在,文字断开并落在最左边的字体真棒图标下方。

这是我的代码。

<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 -->

提前谢谢。

1 个答案:

答案 0 :(得分:0)

包裹你的单独div。这将强制来自a标签的任何溢出流动到标签本身的开头。