Question

我有一个问题，就是让悬挂缩进工作。

我已经搜索了一个悬挂缩进工作，常见的解决方案是设置 x px的填充和 -x px的文本缩进。 / p>

我可以单独使用它，但是如果跨度位于带链接的容器中，则会导致跨度向下移动。

标记代码：

<table>  
  <tr>
    <td class="first">
      <a href="#">888.555-222</a>
      <span>Lorem ipsum dolor sit amet, ex sed ornatus appetere. Modus consequat ut sed. Mel ne sumo dico possim, duo an doming albucius gubergren, mea posse quodsi id. Usu </span>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS：

td.first {
  width: 30%;
}

a {
  display: inline-block;
  width: 60px;
}

span {
  display: inline-block;
  padding-left: 60px;
  text-indent: -60px;
}

这是一个简单的js小提示，显示问题：https://jsfiddle.net/spm4xqw5/我希望跨度与链接在同一行，但如果文本换行，那么我希望后续行缩进。

Answer 1

我不完全确定你想要实现什么，但如果你需要在有限宽度的容器中并排使用两个内联块，你需要做的就是明确设置两个内联块的宽度。登记/> 因此a为60px，td为30％，span需要30%-60px宽。不需要文本缩进或填充。这些盒子的高度不同，所以我添加了一个vertical-align以便进行测量。

td.first {
  width: 30%;
}


a {
  display: inline-block;
  width: 60px;
}

span {
  display: inline-block;
  /*
  padding-left: 60px;
  text-indent: -60px;
  */
  width:calc(30% - 60px);
  vertical-align:top;
}

<table>
  <tr>
    <td class="first">
      <p>
        <a href="#">888.555-222</a>
        <span>Lorem ipsum dolor sit amet, ex sed ornatus appetere. Modus consequat ut sed. Mel ne sumo dico possim, duo an doming albucius gubergren, mea posse quodsi id. Usu </span>
      </p>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

现在我不确定这是你想要的原因是a的内容超过60px，所以它们从a溢出到{{1 }}。没什么可怕的，我希望。

当其他内容存在时如何进行悬挂缩进

1 个答案: