Question

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

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

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

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

有人知道如何只用css做这个吗？

Answer 1

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

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

此外，我希望实现这一点，如果没有额外的元素   可能的。

结合使用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%;
}

DEMO：https://jsfiddle.net/6pmfc87h/3/

以下是发生的事情......

ul成为已应用display: flex的弹散式框。每个li现在排成一行，这是flexbox子项的默认行为（称为“flex项目”）。
justify-content: center将主要轴上的子元素居中。在这种情况下，横向。
align-items: center沿着横轴居中使用子元素。在这种情况下，垂直。
position: relative为绝对定位建立了最近的定位祖先。
position: absolute将最后li移到最近的祖先的左边缘。

要了解有关flexbox的更多信息，请参阅：A Complete Guide to 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/

......当没有更多的空间可以向右滑动时，我更喜欢那样资源管理器不允许用户调整窗口的宽度 thiner！

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

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

Answer 2

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

Answer 3

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

#leftSide{
    float:left;
}

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

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

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

3 个答案: