时间戳

首页 > 解决方案 > 如何在同一行添加一些东西？

html - 如何在同一行添加一些东西？

问题描述

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>

我想在同一行的标题标签内添加一些元素（如 div 标签），但我不能因为div标签占用全宽。但正如我猜想 div 不是一个原因，display: flex不允许我在同一行添加一些东西。

标签： htmlcss

解决方案

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

推荐阅读