浮动右表不工作

我试图将float：右键应用到按钮和文本，但它不工作，因为它破坏了一切。浮动右表不工作

任何想法？

     <hr> 
        <div class="table"> 
         <div class="row"> 
          <a href="#" class="btn-primary left-cell"><i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a> 
          <span class="right-cell"> 14 neue Meldungen</span> 
         </div> 
        </div> 
        <hr>

https://jsfiddle.net/uoyh2fk9/

来源

2016-06-13 Smythu

将'width：100％;'添加到'.table'。 –

已经尝试过，但后来又破了。 – Smythu

不知道是什么，“摧毁一切”的意思，但它听起来像是flexbox可能更好地为你想达到的目标。从您的div删除display: table“S和尝试以下操作：

CSS

.row { 
    display: flex; 
    justify-content: flex-end; 
}

JSFiddle

如果您想了解更多关于flexbox以及它是如何工作的，here is a link。

来源

2016-06-13 16:54:13

谢谢，但我的按钮越来越可怕了。我也希望这两件事都在右侧。 – Smythu

@Smythu你是否反对使用flexbox？或者你必须使用'display：table'？ –

继承人一个jsfiddle与我的按钮css：https：//jsfiddle.net/uoyh2fk9/3/ – Smythu

这里是一个可能的解决方案：https://jsfiddle.net/UXEngineer/uoyh2fk9/9/

<div class="container-fluid"> 
    <div class="col-lg-12"> 
    <div class="col-md-3 col-sm-3 border-red"> 
     <a href="#" class="btn btn-primary"> 
     <i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a> 
    </div> 
    <div class="col-md-9 col-sm-9 border-red"> 
     <span>14 neue Meldungen</span> 
    </div> 
    <div class="col-lg-12 clearfix"></div> 
    <div class="col-lg-12 clearfix"> 
     <hr class="horizontal-divider"> 
    </div> 
    <div class="col-md-9 col-sm-9 border-red"> 
     <span>14 neue Meldungen</span> 
    </div> 
    <div class="col-md-3 col-sm-3 border-red"> 
     <a href="#" class="btn btn-primary"> 
     <i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a> 
    </div> 
    </div> 
</div>

我添加使用引导CDN中的jsfiddle的例子中一个负责任的解决方案。如果您想使用此jsfiddle，请确保您也将CDN外部源添加到您的解决方案。

您可以更改列大小以适合您的解决方案。

来源

2016-06-13 17:36:31

浮动右表不工作

回答

相关问题