使链接换行避免溢出到其他元素

我想格式化，以便链接换行到第二行，删除保持垂直居中在井中，而不是删除下降以避开，作为它在下面的小提琴中。到目前为止，我所尝试过的任何工作都无法解决，但我承认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个字符。

来源

2014-10-30 rfj001

在什么条件下应该是换？这是一个单词，你会在哪里包装？在小提琴中（并且在你的代码中）删除不是以'well'为中心的，它怎么能够保持居中？你的意思是垂直居中？ – Amadan 2014-10-30 05:49:24

该标记无效，因此您应该期望混淆。 – 2014-10-30 05:53:49

对不起，是的，我的意思是垂直居中。我希望它在与包含删除链接的发生冲突时进行换行。和@ JukkaK.Korpela，标记是如何失效的？ – rfj001 2014-10-30 05:57:03

你是正在寻找this???

添加一些CSS

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

来源

2014-10-30 06:19:22 Chakri

请注意，在更改屏幕尺寸时，如何删除按钮上下移动？我希望它保持垂直居中。 – rfj001 2014-10-30 06:39:37

原因是你已经添加了拉右班。现在，它变成了一个浮动元素。尝试将其位置更改为固定，但即使如此，如果屏幕变得太小，您会注意到按钮位置的变化。 – Chakri 2014-10-30 06:44:11

我结束了使用引导网格系统才可以正常工作。删除按钮不是居中的，但它始终与最上面一行相同，对于典型的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/

来源

2014-10-30 07:09:52 rfj001

使链接换行避免溢出到其他元素

回答

相关问题