更改 css 宽度过渡的方向

Question

我有一个带有二十三主题的 WordPress 页面。例如：https://twentythirteendemo.wordpress.com/

导航栏的最后一个元素是搜索表单。如果我单击搜索表单，将启动一个 CSS 过渡，该过渡向左淡化，最终显示整个搜索表单。

我想将放大镜图标更多地放在左侧（这很简单：只需更改 right css-属性）并更改过渡方向.过渡应该从左到右（而不是像现在这样从右到左）。

感谢您的帮助。

Answer 1

解决方法是将下面CSS中的right属性改为left：

.site-header .search-form {
    position: absolute;
    right: 200px;
    top: 1px;
}

那么过渡将从左到右。当然，px 需要相应地进行调整。

Answer 2

如果您在 position: absolute; left: 0; 上设置标签，输入将向右打开。

编辑:

将元素定位到右侧会将元素对齐到右侧。 text-align 适用于内联元素，right 和 left 适用于绝对定位元素。

因此，如果要实现向右增长，请将元素向左对齐。

Change direction of css width transition