如何水平对齐div内的不同元素？
[英]How to align different elements inside div horizontally?
问题描述
I have made 3 elements:
我做了3个元素：
Title ie All contacts
标题即所有联系人Dropdown Button
下拉按钮Circular button
圆形按钮
I want to arrange all 3 of horizontally but they are getting placed one below the other (see screenshot).我想水平排列所有 3 个，但它们被放置在另一个下方（见截图）。
Above elements must be arranged horizontally similar to below screenshot:上面的元素必须水平排列，类似于下面的截图：
.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
Below if an example of flexible item which you mentioned in the comment.下面是您在评论中提到的灵活项目的示例。
.button is not immediate to parent having display:flex , hence it won't be flexible. .button不是直接拥有display:flex父级，因此它不会灵活。 As you can check in the snippet.正如您可以检查代码段一样。
If you remove the div with class
button, the<button>will stretch itself, and will be considered flexible.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>
While here you will see that, property is assigned to id addbutton , and it will work fine在这里你会看到，属性被分配给 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
I'd use flex, justify content, and re-arrange your html order if you want All Contacts to be in the center.如果您希望所有联系人都在中心，我会使用 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.