html - 如何在一个 div(nav) 中有不同的对齐方式？

Question

在这个 fiddle 中:https://jsfiddle.net/vtrec4oL/

我要#leftSide在我的 <nav> 的左端对齐其余的在中间。

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

另外，如果可能的话，我很乐意在没有额外元素的情况下实现这一目标。

有谁知道如何仅使用 css 来做到这一点？

Answer 1

I want a#gnbii to align on the left end of my nav bar and the rest of the links in the center.

But I want my page to be as compatible as possible to window resizing so I prefer not to use margin/padding.

Also I would love to achieve this with no additional element if possible.

结合使用 CSS flexbox 和 positioning 属性可以满足所有要求。

首先，为您的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 的信息，这里有一个很好的引用:A Complete Guide to Flexbox

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

---

更新(基于评论；适用于较小的屏幕)

i want it to slide to right as much as possible instead of overlapping...

好的，所以我们可以将 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/

...and when there is no more space to slide right, i prefer that then the explorer doesn't let the user resize the width of the window any thiner!

您确定这是您要执行的操作吗？有some JavaScript methods设置浏览器窗口大小，但我不确定它们在所有浏览器中是否完全可靠。更重要的是，我认为这不符合最佳实践。在我看来，应该允许用户重新调整浏览器窗口的大小，无论浏览器本身允许多少。 [ Learn more .]

作为 Web 开发人员，您最好专注于您拥有更多控制权的领域。您可以设置一个 min-width 声明，告诉浏览器您的元素不能再变窄了。或者您可以使用媒体查询来改变周围的事物以适应较小的屏幕。