Question

我制作了3个元素：

标题即所有联系人
下拉按钮
圆形按钮

我希望水平排列所有3个，但是它们会被放置在另一个之下（见截图）。

上面的元素必须水平排列，类似于下面的截图：

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

下面是您在评论中提到的灵活项目的示例。

对于.button的父母来说，{p> display:flex不是直接的，因此它不会灵活。您可以查看代码段。

如果您删除了课程button的div，则<button>会自行延伸，并且会被视为灵活。

＆＃13;

.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%;
}

＆＃13;

<!-- 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>

＆＃13;

在这里你会看到，属性被分配给id addbutton，它会正常工作

＆＃13;

.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%;
}

＆＃13;

<!-- 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>

＆＃13;

Answer 2

如果您希望所有联系人都在中心，我会使用flex，证明内容，并重新安排您的html订单。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

如何水平对齐div内的不同元素？

2 个答案: