浮動右表不工作

我試圖將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

浮動右表不工作

回答

相關問題