如何在一个div（nav）中进行不同的对齐？

Question

在这个小提琴： https ： //jsfiddle.net/vtrec4oL/

我希望#leftSide在我的<nav>的左端对齐，其余的在中心。

但我希望我的页面尽可能与窗口大小调整兼容，所以我不想使用margin / padding。

如果可能的话，我也很乐意实现这个目标，没有额外的元素。

有谁知道如何只用css这样做？

Answer 1

我希望a#gnbii在导航栏的左端和中心的其余链接对齐。

但我希望我的页面尽可能与窗口大小调整兼容，所以我不想使用margin / padding。

如果可能的话，我也很乐意实现这个目标，没有额外的元素。

通过CSS flexbox和定位属性的组合， 可以满足所有要求。

首先，在a#gnbii父容器中添加一个ID：

<li class="gnb" id="align-left"> /* NEW - ID added */
<a class="gnb" id="gnbii" href="home.html">
<img id="gnbii" src="../images/instagram icon/1.png" alt="aranpuzzle.ir" height="40px">
<img id="gnbii" src="../images/instagram icon/2.png" alt="aranpuzzle.ir" height="40px">
</a>
</li>

这是CSS：

ul {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#align-left {
    position: absolute;
    left: 2%;
}

演示： https ： //jsfiddle.net/6pmfc87h/3/

这是发生了什么......

• ul成为一个带有display: flex应用的flexbox。 每个li现在排成一行，这是flexbox子项的默认行为（称为“flex项目”）。

• justify-content: center沿着主轴居中子元素。 在这种情况下，水平。

• align-items: center沿横轴居中子元素。 在这种情况下，垂直。

• position: relative为绝对定位建立最近的定位祖先。

• position: absolute将最后一个li移动到最近的祖先的左边缘。

要了解有关flexbox的更多信息，请参考以下内容： Flexbox完整指南

要了解有关绝对位置的更多信息，请查看： MDN position

---

更新 （基于评论;对于较小的屏幕）

我希望它尽可能向右滑动而不是重叠......

好的，我们可以添加white-space: nowrap到ul这样导航项就会一直保持不变。

然后声明媒体查询以在较小的屏幕上向右移动所有内容：

@media only screen and (max-width: 768px) { 
    ul { justify-content: flex-start; }  /* note: site is RTL */
    #align-left { position: static; }
}

更新的演示： https ： //jsfiddle.net/6pmfc87h/4/

...当没有更多的空间可以向右滑动时，我更喜欢探测器不会让用户调整窗口的宽度！

你确定这是你想做的吗？ 有一些JavaScript方法可以设置浏览器窗口大小，但我不确定它们在所有浏览器中是否完全可靠。 更重要的是，我认为这不符合最佳做法。 在我看来，应该允许用户重新调整浏览器窗口的大小，无论浏览器本身允许多少。 [ 了解更多 。]

最好将注意力集中在作为Web开发人员更有控制力的领域。 您可以设置一个min-width声明，告诉浏览器您的元素不能变得更窄。 或者您可以使用媒体查询来改变周围的东西以适应较小的屏幕。

Answer 2

如果要对齐特定元素，只需创建一个类并将其添加到该元素即可。 如果要对齐最后一个孩子或第一个孩子，请在css中使用：first-child或：last-child selector。 请记住，＃leftSide是一个ID，会影响一个元素，而是使用一个类。

Answer 3

将以下内容添加到您的css：

#leftSide{
    float:left;
}

但是，如果我是你; 我会为左图添加一些左边距的像素，因此它不在边缘。

不幸的是，我的解决方案破坏了你的垂直对齐！