Question

header {
  background-color: red;
  border: 5px solid green;
}

img {
  box-sizing: border-box;
  padding: 10px;
  height: 80%;
  border: 2px solid yellow;
}

nav {
  border: 2px solid yellow;
  height: 80%;
  padding: 10px;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  overflow: auto;
  border: 2px solid white;
  padding: 0;
}

div {
  border: 2px solid blue;
  display: flex;
  height: 200px;
  width: 50%;
  align-items: center;
}

li {
  float: left;
  margin: 30px;
}

<body>
  <header>
    <div>
      <img src="image.png" alt="Logo" />
      <nav>
        <ul>
          <li><a href="https://google.com">Google</a></li>
          <li><a href="https://facebook.com">Facebook</a></li>
          <li><a href="https://yahoo.com">Yahoo</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>

我想在 header 标记内的同一行上添加一些元素（例如div标记），但是我不能这样做，因为 div 标记占用了全角。但由于我猜测div不是原因，display: flex不允许我在同一行中添加内容。

Answer 1

.table {
  display: table;
  width: 100%;
}

.cell1,
.cell2 {
  display: table-cell;
  vertical-align: middle;
}

header {
  background-color: red;
  border: 5px solid green;
}

img {
  box-sizing: border-box;
  padding: 10px;
  height: 80%;
  border: 2px solid yellow;
}

nav {
  border: 2px solid yellow;
  height: 80%;
  padding: 10px;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  overflow: auto;
  border: 2px solid white;
  padding: 0;
}

li {
  float: left;
  margin: 30px;
}

<header>
  <div class="table">
    <div class="cell1">
      <img src="image.png" alt="Logo" />
    </div>
    <div class="cell2">
      <nav>
        <ul>
          <li><a href="https://google.com">Google</a></li>
          <li><a href="https://facebook.com">Facebook</a></li>
          <li><a href="https://yahoo.com">Yahoo</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Answer 2

由于您希望div有一个“兄弟”，因此需要将display: flex;移到父元素（在您的情况下为标头）。然后声明每个孩子要多少flex。

<body>
  <header>
    <div id="left">
    <img src="image.png" alt="Logo"/>
      <nav>
        <ul>
          <li><a href="https://google.com">Google</a></li>
          <li><a href="https://facebook.com">Facebook</a></li>
          <li><a href="https://yahoo.com">Yahoo</a></li>
        </ul>
      </nav>
    </div>
    <div id="right">hello</div>
  </header>
</body>

-

header{
  background-color:red;
  border:5px solid green;
  display:flex;
}

div{
  border:2px solid blue;
  height: 200px;
  width:50%;
  align-items: center;
}

#left {
  flex: 1;
}

#right {
  flex: 1;
}

如何在同一行上添加内容？

2 个答案: