如何創建右對齊的注銷按鈕？

Question

我的最高級div充當徽標並具有標題。 我希望注銷按鈕位於div的右側，並且上面的文本也右對齊。

我不知道按鈕/鏈接的位置，因為我不知道該在哪里放置它。
我正在尋找這樣的東西：

我的目標是徽標，右側是注銷按鈕，頂部帶有文本。
我該如何實現？

 .logo { overflow: hidden; text-align: left; position: relative; margin: 0px 100px; height: 60px; background-color: pink; color: blue; font-family: Arial; } 

 <div class="logo"> <h1>LOGO</h1> </div> 

Answer 1

您可以在此處使用flexbox。 試試看：

 .wrap { display: flex; justify-content: space-between; } .logo { overflow: hidden; text-align: left; position: relative; height: 60px; background-color: white; color: #1F6C8B; font-family: Arial; } 

 <div class='wrap'> <div class="logo"> <h1>LOGO</h1> </div> <div> <p>abcdefg</p> <button>Click It</button> </div> </div> 

jsfiddle： https ://jsfiddle.net/dm198kpx/2/

Answer 2

有多種方法可以實現您想要的。 我相信最簡單的方法是使用Flexbox ：

 .flex { display: flex; } .justify-between { justify-content: space-between; } 

 <div class="flex justify-between"> LOGO <div> BLABLABLA<br> <button>Logout</button> </div> </div> 

在這里， flex是display屬性，通常在容器類型的元素（如div ）中使用。 它有助於對齊內容。 它允許使用其他各種屬性，例如justify-content ， align-items *和其他屬性。 在這種情況下，我們只使用justify-content ，它使主軸上的直接子項（默認情況下為水平軸）與在中間的space-between值對齊，該值將盡可能地分配內容-並且因為我們只有兩個LOGO和<div>的<div class="flex justify-between">直接子代，將第一個放在最左邊，最后一個放在最右邊。

*：您可以在此游戲中了解有關Flexbox屬性和用例的更多信息： https ://flexboxfroggy.com/

Answer 3

我已將按鈕添加到我認為的標題中？ 我使用了本機header標記，但是如果不是您的標頭，則始終可以使用具有唯一ID的div替換它。 我加入了position:fixed; 在css中，否則按鈕將不會停留在右側（您可以使用float，但是它可能是有問題的恕我直言）。 高度/顏色等當然是可調的。

希望這可以幫助

 h1.logo { display: inline-block; position: relative; text-align: left; margin: 10px 100px; height: 60px; background-color: white; color: #1F6C8B; font-family: Arial; } #logout { background-color: lightblue; height: 30px; text-align: right; right: 40px; position: fixed; } .logo, #logout { vertical-align: top; } 

 <header> <h1 class="logo">LOGO</h1> <button id="logout">Logout</button> </header> 

編輯：剛看到上面的文字對您的問題進行了編輯。 見小提琴