Question

我正在尝试创建我的投资组合页面。我有4个小标题（关于，简历，博客和投资组合）。

所以我想把这些标题放在我的div的顶部。所以我所做的是创建了一个无序列表，使其显示为内联属性。现在所有标题都列在同一个列表中。

现在我想在标题之间留出间距。当然有保证金和填充选项，但是有什么方法可以避免保证金/填充并直接通过flex执行此操作？（我希望减少小屏幕媒体查询的负载）

Answer 1

ul可以是弹性容器，您可以使用justify-content: space-between均匀地展开元素：

.header {
  display: flex;
  width: 50%;
  margin: 0 auto;
  padding: 0;
  justify-content: space-between;
  list-style: none;
}

<ul class="header">
  <li class="header__item">About</li>
  <li class="header__item">Resume</li>
  <li class="header__item">Blog</li>
  <li class="header__item">Portfolio</li>
</ul>

Answer 2

你可以使用justify-content和最终伪元素来将元素挤压到中间

nav {
  display:flex;
  justify-content:space-around;
}
/*increase space from side at first and last child */
nav:before,
nav:after {
  content:'';
  width:25vw;/* or % . tune this or remove pseudo if unneeded */
}
a {
  margin:0 1em;
}

<nav>
  <a href="#">About</a>
  <a href="#">Resume</a>
  <a href="#">Blog</a>
  <a href="#">Folio</a>
</nav>

如何在html中使用flex与列表？

2 个答案: