如何在一个div(nav)中实现不同的对齐方式？

Question

在这个代码片段中: https://jsfiddle.net/vtrec4oL/ 我想让#leftSide在<nav>的左端对齐，其他内容居中。

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

如果可能的话，我也希望能够不添加任何元素来实现这一点。

有人知道如何只使用CSS来实现这个吗？

- yukashima huksay

---

抱歉，那些是打错字了 :) - yukashima huksay

抱歉如果那听起来有点刻薄，我并不是有意的。 :) - programking

哈哈！那是一个命令！是的，长官！抱歉！我以为那是一个答案！;)祝你编程愉快，伙计！如果你也对答案感到好奇，请投票支持我的问题;) - yukashima huksay

我认为这个标题更好，因为它的答案也是如何使一些元素左对齐，一些右对齐，一些居中等的答案。我认为代码应该在开头提到，因为我们首先必须定义#leftSide，然后再谈论它。但是感谢您的回车！我不知道如何输入！奇怪的是，您需要输入两次才能实现一行断开！ - yukashima huksay

您还可以使用 br 标签在问题中创建换行。 - Michael Benjamin

Answer 1

我希望您将放在我的导航栏左侧端，其余链接位于中心。

但是，我希望我的页面尽可能兼容窗口调整大小，因此最好不要使用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，使其成为一个弹性盒子。每个 li 现在排成一行，这是弹性盒子子元素（称为“flex项目”）的默认行为。

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

• align-items: center 沿交叉轴居中子元素。在这种情况下，是垂直方向。

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

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

如果想了解更多关于flexbox的内容，这里有一份不错的参考资料：Flexbox完全指南

如果想了解更多关于绝对定位的内容，请查看：MDN position

---

更新（根据评论；适用于较小的屏幕）

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

好吧，我们可以在 ul 中添加 white-space: nowrap，这样导航项目总是保持在一行中。

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

@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 方法可以设置浏览器窗口大小，但我不确定它们在所有浏览器上都完全可靠。更重要的是，我认为这不符合最佳实践。在我看来，用户应该被允许根据浏览器本身允许的程度自由调整浏览器窗口大小。[了解更多.]

你最好将重点放在作为网页开发者拥有更多控制的领域上。你可以设置一个 min-width 声明，告诉浏览器你的元素不能再变窄了。或者你可以使用媒体查询来调整屏幕大小以适应较小的屏幕。

- Michael Benjamin

---

当我准备回答你的问题时，你已经改变了你的HTML和fiddle演示。然而，这个答案仍适用于你修改后的问题，并涵盖了你的所有要求。如果你有任何问题，请发表评论。 - Michael Benjamin

很抱歉我进行了编辑，但是我意识到其中有太多无关细节，所以我想让它简短而通用 :) - yukashima huksay

没有问题，编辑得很好。你的修改也非常清晰明了。 - Michael Benjamin

我希望它向右滑动尽可能多，而不是重叠，并且当没有更多的空间向右滑动时，我更喜欢浏览器不让用户调整窗口的宽度！如果不行，那么我就无所谓发生什么了！我只会发出警告！但在手机等设备上，我会使用较小的字体等方式来解决。 - yukashima huksay

好的，我想我已经得到了答案！我只是添加了一点填充，对齐就固定了，浮动也按照我的要求滑动，左侧的图像也不太厚，所以它们对中心文本对齐没有太大影响:)非常感谢您的时间和建议:)我从您那里学到了很多:)祝编程愉快;):) - yukashima huksay

Answer 2

如果您想对特定元素进行对齐，请创建一个类并将其添加到该元素中。 如果您想对最后一个子元素或第一个子元素进行对齐，请在您的CSS中使用:first-child或:last-child选择器。 请记住，#leftSide是一个ID，会影响一个元素，而不是使用类。

- dacastro4

---

展示给我你的代码，或者将其粘贴到JSFiddle中以便我能帮助你。 - dacastro4

我太懒了，不想那么做！我更喜欢耐心一点:)非常感谢！ - yukashima huksay

你尝试过这个代码吗？nav li#leftSide { text-align:left; } - dacastro4

是的，如果您编辑问题，它会重新出现在“最近活跃”列表的顶部。无需删除并重新开始。 - Michael Benjamin

@dacastro4：我做了这个fiddle :) - yukashima huksay

Answer 3

请在您的CSS中添加以下内容：

#leftSide{
    float:left;
}

但是，如果我是你，我会为左边的图片添加一些像素的 margin-left，这样它就不会在边缘了。

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

- yukashima huksay