Question

我已经查看过这个问题的很多版本，答案似乎在很大程度上起作用，但最终导致其他问题。

我有一个我想在这里创建的布局图... layout diagram

我现在要修复的部分是右上角的导航。

它的3个链接，我希望左侧链接位于左侧边缘，右侧链接位于右侧边缘。中间链接将在左右链接之间居中。

我遇到的一个问题是当你缩小链接堆叠在一起时窗口的大小时，我喜欢它们在缩小窗口时移动而不是堆叠。

我现在如何拥有它的另一个问题是在顶部添加边距或填充以向下移动链接不起作用。由于某种原因，它被忽略了。

Answer 1

如果你可以使用flexbox，那很容易。

＆＃13;

.menu {
  display: flex;
  margin:0;
  padding:0;
  list-style-type: none;
  justify-content: space-between;
}

li {
  padding:5px;
  background-color: #ccc;
}

＆＃13;

<ul class="menu">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

＆＃13;

Answer 2

如果您无法使用flex，请使用inline-block和text-align:justify

.menu {
  margin: 0;
  padding: 0;
  text-align: justify;
  font-size: 0;
}
li {
  display: inline-block;
  font-size: 14px;
  width: 120px;
  background-color: #ccc;
  text-align: center;
}
li:first-child {
  text-align: left;
}
li:last-child {
  text-align: right;
}
ul:after {
  display: inline-block;
  width: 100%;
  content: '';
}

<ul class="menu">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

传播UL导航链接水平均匀间隔，第一个链接对接到左边缘，最后一个链接对接到右边缘

2 个答案: