如何水平對齊div內的不同元素？
[英]How to align different elements inside div horizontally?
問題描述
我做了3個元素：
標題即所有聯系人
下拉按鈕
圓形按鈕
我想水平排列所有 3 個，但它們被放置在另一個下方（見截圖）。
上面的元素必須水平排列，類似於下面的截圖：
.header .title { text-align: center; } .header .dropdown { padding-left: 20px; } .header .button { background-color: red; border: none; color: white; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; margin: 4px 2px; border-radius: 50%; }
<body> <div class="header"> <div class="title"> <h2>All Contacts</h2> </div> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">All Contacts</a></li> <li><a href="#">Family</a></li> <li><a href="#">Work</a></li> </ul> </div> <div id="addbutton"> <button class="button">+</button> </div> </div> </body>
2 個解決方案
解決方案1
1 已采納 2018-02-05 14:13:07
下面是您在評論中提到的靈活項目的示例。
.button不是直接擁有display:flex父級，因此它不會靈活。 正如您可以檢查代碼段一樣。
如果使用 class
button刪除 div，<button>將自行拉伸，並被認為是靈活的。
.header { display: flex; flex-direction: row; background-color: skyblue; } .header .title { text-align: center; flex: 1; } .header .dropdown { padding-left: 20px; flex: 1; margin-top: 20px; } .header .button { flex: 1; background-color: red; border: none; color: white; padding: 20px; text-decoration: none; font-size: 18px; margin: 4px 2px; border-radius: 50%; }
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <div class="header"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">All Contacts</a></li> <li><a href="#">Family</a></li> <li><a href="#">Work</a></li> </ul> </div> <div class="title"> <h2>All Contacts</h2> </div> <div id="addbutton"> <button class="button pull-right">+</button> </div> </div>
在這里你會看到，屬性被分配給 id addbutton ，它會正常工作
.header { display: flex; flex-direction: row; background-color: skyblue; } .header .title { text-align: center; flex: 1; } .header .dropdown { padding-left: 20px; flex: 1; margin-top: 20px; } .header #addbutton { flex: 1; } .header .button { flex: 1; background-color: red; border: none; color: white; padding: 20px; text-decoration: none; font-size: 18px; margin: 4px 2px; border-radius: 50%; }
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <div class="header"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">All Contacts</a></li> <li><a href="#">Family</a></li> <li><a href="#">Work</a></li> </ul> </div> <div class="title"> <h2>All Contacts</h2> </div> <div id="addbutton"> <button class="button pull-right">+</button> </div> </div>
解決方案2
1 2018-02-05 14:21:30
如果您希望所有聯系人都在中心，我會使用 flex，證明內容並重新排列您的 html 順序。
.header { display: flex; justify-content: space-between; background-color: rgb(73, 76, 178); } .header .title { text-align: center; } .header .dropdown { padding-left: 20px; } .header .button { background-color: red; border: none; color: white; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; margin: 4px 2px; border-radius: 50%; }
<body> <div class="header"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">All Contacts</a></li> <li><a href="#">Family</a></li> <li><a href="#">Work</a></li> </ul> </div> <div class="title"> <h2>All Contacts</h2> </div> <div id="addbutton"> <button class="button">+</button> </div> </div> </body>
在div中將頂部的元素水平對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.