改变css宽度过渡的方向

Question

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

导航栏的最后一个元素是搜索表单。如果我点击搜索表单，会启动一个CSS转换，向左淡化，最后显示整个搜索表单。

我想将放大镜图标放在左侧（这很简单：只需更改right css-property）并更改过渡的方向。过渡应该从左到右（现在不是从右到左）。

感谢您的帮助。

Answer 1

如果您在$this上设置标签，则输入将向右打开。

修改：

将元素定位到右侧会将元素的对齐方式设置为右侧。由于position: absolute; left: 0;适用于内联元素，text-align和right适用于绝对定位元素。

所以，如果你想要向右增长，请将元素对齐到左边。

Answer 2

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

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

然后转换将从左到右。当然，px需要相应调整。