爲什麼浮動的按鈕不能保持其位置？

在代碼片段中，您可以看到，如果我想過去浮動的按鈕/組，他們不能保持相對段的位置。我的佈局有什麼問題？代碼列表ü可以看到https://codepen.io/saveurmind/pen/oWXWOa 放在段中的標頭內容，我在原始中使用了全尺寸列（16）。如果我使用沒有「右浮動」的按鈕 - 一切正常。爲什麼浮動的按鈕不能保持其位置？

<div class="row"> 
    <div class="sixteen wide column"> 
    <div class="header-bar"> 
    <div class="ui segment"> 
    <div class="header-content"> 
     <h3 class="ui header">Title</h3> 
     <div class="ui right floated basic buttons"> 
     <div class="ui button">One</div> 
     <div class="ui button">Two</div> 
     <div class="ui button">Three</div> 
     </div> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div>

來源

2017-04-16 Some Berry

您可以使用clearfix包含在你的母塊的子元素。

.clearfix:after { 
    content: " "; /* Older browser do not support empty content */ 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
}

如果你想與同一行BTN標題，兩個路要走：

變化H3跨越（CUS H1〜H6將整條生產線）

https://codepen.io/hdl881127/pen/bWdRVp

如果你想保留h3，那麼你需要添加一個新的類叫

https://codepen.io/hdl881127/pen/BRNZLj

.inlineblock{ 
    display:inline-block; 
}

更多信息：

What is a clearfix?

來源

2017-04-16 15:02:11

但在這種情況下按鈕不能在同一行@SomeBerry你想要的「標題」 –

同一條線？好吧等一下 –

@SomeBerry檢查我的更新答案，兩種方法讓他們同一行 –

爲什麼浮動的按鈕不能保持其位置？

回答

相關問題