Question

我想格式化这个，以便链接包裹到第二行，并且删除保持垂直居中在井中，而不是删除下降以避开，因为它在下面的小提琴中。到目前为止，我没有尝试过任何工作，但我确实认为CSS很差。

代码：

<div id="listing_10" class="well">
       <a href="#">Words words words words words words words words words words words</a>
       <span class="pull-right">
           <a style="text-decoration: none" class="delete_listing" href="#">
               <i class="fa fa-lg fa-times-circle danger"></i><strong class="danger" style="vertical-align: middle"> Delete</strong>
           </a>
       </span>
</div>

这里是jFiddle http://jsfiddle.net/ohbnkok8/4/

注意：

链接的文字最多为50个字符。

Answer 1

您在寻找this???

吗？

添加几个CSS

a {display: inline-block; max-width: 80px; vertical-align: middle;}

Answer 2

我最终使用引导网格系统来使事情有效。删除按钮不是居中的，但它始终与顶行相同，对于我将会看到的典型1行情况，它将使其居中，并且当有2或3时仍然看起来很好线。

<div id="listing_10" class="well">
    <div class='row'>
        <div class='col-md-9 col-sm-8 col-xs-7'>
            <a href="#">Words words words words words words words words words words words</a>
        </div>
        <div class='col-md-3 col-sm-4 col-xs-5 text-right'>
            <a style="text-decoration: none" class="delete_listing" href="#"><i class="fa fa-lg fa-times-circle danger"></i><strong class="danger" style="vertical-align: middle"> Delete</strong></a>
        </div>
    </div>
</div>

请参阅jsfiddle http://jsfiddle.net/ohbnkok8/12/

进行链接包装以避免溢出到其他元素中

2 个答案: