基于位置的响应式文本对齐

Question

我认为答案是否定的,但在我做出更大幅度的改变之前,我想确保我没有错过任何东西.

是否有一种手段,仅通过CSS,根据它是否更朝向屏幕的左侧或右侧来改变元素及其子元素的对齐方式？

这没有直接的属性,但我看到我是否错过了一些类似黑客的方法,可能涉及伪选择器或元素.

展示当前的困境:

我有一个<ul>导航栏,提供<a>链接和一些嵌套<ul>容器的混合,用于悬停下拉菜单.相当标准,在更宽的屏幕上工作正常:

如果可用的屏幕空间较少,导航将按预期包裹到下一行.这是一个理想的结果.但是,有时下拉菜单可能会在屏幕外被截断,这不是很理想:

而不是为移动设备提供截然不同的风格(我的后备计划是通过postion: fixed较小的屏幕而不是现在将下拉菜单呈现为类似对话框的选择position: absolute),我可以通过我的元素意识来修复我的情况他们冒险离屏并且需要两者text-align: right并且可能调整他们的绝对位置以锚定在父母的右边<li>而不是左边,就像现在一样:

我可以通过javascript管理这个,但我已经发生了足够的监听器事件,并希望提供更优雅的响应,避免使用javascript.如果没有css方法,我可以使用固定位置替代作为计划b.

澄清:

虽然我原本希望使用媒体查询来解决移动设备上的这种困境,但我意识到,虽然这对我来说只是在较小的屏幕尺寸上显而易见,但这并不是我认为理所当然的事情.

例如,导航项的数量可能在将来增长,并且可以在任何屏幕尺寸处呈现这种情况.它只需要一个下拉菜单就可以在屏幕右侧.

我也不能保证我还没有测试的设备没有按照我没想到的那样复制问题.

我的观点是,我没有看到一种可以依赖屏幕尺寸媒体查询的方式.我认为我的解决方案(如果有的话)需要响应屏幕上元素的位置 - 这就是为什么我认为我可能会因非javascript解决方案而失败.

其次:假设内容是动态的,并且像任何有能力的页面一样,应该动态地改变属性以适应这一点的元素(例如导航项目顺序,计数,宽度等).我应该把在这个领域寻找更精细警告的人推荐给原来的问题:是否有一种方法,仅通过CSS,根据它是否更朝向屏幕的左侧或右侧来改变元素及其子元素的理由？

示例代码:

根据要求,这是示例代码.我不认为在这种情况下包含它是一个好主意(尽管在大多数问题中理解它很重要),因为它减少了与我的特定代码无关的问题,而且更多地与质疑css动态修改的能力有关.基于屏幕位置或屏幕边缘意识的属性 - 在任何场景中 - 因此我倾向于说明问题.

代码是我自己的简化版本,但问题几乎可以通过标准的熟悉的<ul>导航菜单进行询问,该菜单通过:hoverCSS 提供下拉菜单.

考虑到这一点,如果你试图通过我的代码解决问题,那么我可能很难描述我的困境.我相信我非常精通CSS目前可以推广到的范围,并且相信答案是'没有javascript就不可能',但我只是确保我没有错过动态改变元素属性的聪明的解决方法/黑客通过基于屏幕位置的CSS(抱歉重复问题 - 我只是想确保它被理解,遵循一些评论).谢谢.

<ul class="nav nav__container">

    <li><a class='nav nav__item' href="#">Standard Link</a></li>
    <li><a class='nav nav__item' href="#">Standard Link</a></li>
    <li><a class='nav nav__item' href="#">Standard Link</a></li>
    <li><a class='nav nav__item' href="#">Standard Link</a></li>
    <li class='nav nav__item nav__item--dropdown'><li><a href="#">Dropdown Label</a></li>
        <ul class='nav nav__dropdown'>
            <li><a class='nav nav__item nav__item--dditem' href="#">Dropdown Link</a></li>
            <li><a class='nav nav__item nav__item--dditem' href="#">Dropdown Link</a></li>
            <li><a class='nav nav__item nav__item--dditem' href="#">Dropdown Link</a></li>
        </ul>
    </li>

</ul>

Answer 1

这看起来像是核心问题的答案：

有没有办法仅通过 CSS 来根据元素及其子元素是更靠近屏幕的左侧还是右侧来更改元素及其子元素的对齐方式？

没有。

作为更彻底的后续答案，我想我会提到，我不会采用我最初的 B 计划，将样式下拉菜单固定在较小的屏幕尺寸上。我在问题中暗示了这一点，但更明显的是，我不能依赖屏幕尺寸来确定下拉菜单将来是否会被截断。因此，考虑到媒体查询现在已被排除，如果我想确保不向任何设备提供草率的解决方案，我需要另一个解决方案。

这让我剩下了 javascript。我试图避免这种情况，但在现阶段，考虑到结果，我会顽固地这样做。

方法

为了防止对其他人有用，我使用jquery提供了一个用于将鼠标悬停在下拉菜单上的侦听器。逻辑是，某个类的所有元素都保证有一个下拉菜单，由<ul>另一个类的元素组成。所以我可以轻松地瞄准两者。

我可以检查下拉菜单是在屏幕的右侧还是左侧。这会工作得很好。由于比较挑剔，我宁愿菜单保持在左侧对齐，除非它距屏幕右侧约 200 像素——这是我的动态内容的安全阈值。我可以去测量每个下拉菜单的宽度，并在遇到问题时将其用作阈值。

将所有这些放在一起。如果我将鼠标悬停在下拉菜单上，并且它发现自己距离屏幕右侧不到 200 像素，它会将其菜单向右对齐，并将下拉菜单绝对定位到其父菜单标签的最右侧/trigger（正如我在原始插图中所示）。有更灵活和更短的版本可以做到这一点，并且对于任何避免使用库的人来说，如果没有jquery ，也不需要做更多的工作：

JS代码

$(nav).on('mouseover', '.dropdown', function() {

    var dropdownlist = $(this).children('ul');
    var screenWidth = $(window).width();
    var parentOffsetLeft = $(this).offset().left;
    var spaceRight = screenWidth - parentOffsetLeft;

    if (spaceRight < 200) {

        $(dropdownlist).css('text-align', 'right');
        $(dropdownlist).css('right', '0');
        $(dropdownlist).css('left', 'initial');

    } else {

        $(dropdownlist).css('text-align', 'left');
        $(dropdownlist).css('left', '0');
        $(dropdownlist).css('right', 'initial');

    }

});

使用此 javascript，我可以重新创建问题中所示的解决方案。