如何在其他内容存在时执行垂直缩进

我已经搜索上获得一个悬挂缩进工作，常见的解决方案是设置X像素的填充和-x PX的文本缩进。

我可以让它自己工作，但是如果跨度在一个带有链接的容器中，它会导致跨度向下移动一行。

标记代码：

<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/我想跨度是在同一行的链接，但如果文本包装然后我想要后续行缩进。

来源

2017-08-20 BlasiuS

我认为你不能简单地将链接/锚点放在范围内？（_I。，类似于'Whatever您的文本将缩进...'_） – SpencerD

hm是我能够将表格单元格的全部内容放在一个范围内，如果这有助于提供解决方案 – BlasiuS

哦，那么在那种情况下，或许像下面这样的东西就足够了：https：//jsfiddle.net/3w16yqt2/1/（注意，在这种情况下，我在锚标记和文本之间有一个额外的跨度，在两者之间提供一些空间，通过修改宽度可以在CSS中调整空间的大小。）但是，如果这就是你想要的，则不是100％。所以我把它作为评论而不是答案发送。 – SpencerD

我不完全确定你想实现什么，但是如果你需要在一个有限宽度的容器中并排放置两个内联块，你需要做的就是明确设置两个内联块的宽度。
因此，对于30px的60px和td的a，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的含量比60像素宽，所以他们溢出了a进入span 。我希望没有什么致命的。

来源

2017-08-21 19:28:53

在我的特殊情况下，链接将始终为固定宽度，但跨度文本将是可变的。我用css不太高级，也不知道计算值，更不用说从基于百分比的基础上减去固定宽度。这正是我所期待的，非常感谢 – BlasiuS

如何在其他内容存在时执行垂直缩进

回答

相关问题