Javascript 如何在标题栏中将输入字段向右展开

我有一个标题栏，上面有左对齐的项目、居中的项目和右对齐的项目。在中间，我有多个项目和一个搜索输入字段。当搜索区域获得焦点时，我通过设置宽度动画使其变宽。现在，由于项目居中，因此它将设置左右动画以使内容居中。如何更改此选项，使其保持对齐并向右扩展宽度

我没有使用引导。 我目前正在使用一个表格作为标题栏内容。我愿意改变这一点，但如果有一种方法可以用当前的设计来实现，那将是首选

这是一个JSFIDLE…单击搜索字段查看发生了什么：

编辑：我已经用下面建议的解决方案对其进行了更新。我唯一的问题是输入周围的红色容器也应该展开

HTML/CSS/JS代码段

$（“#搜索”）.focus（函数（）{
$（此）.val（“”）；
$（'隐藏内容'）.css（'显示'，'内联'）；
$（this.animate（{width:'180px'}，200）；
});
$（'#search'）.blur（函数（）{
$（this.val（'Search'）；
$（'hidden'u content'）.css（'display'，'none'）；
$（this.animate（{width:'120px'}，200）；
});
。标题导航栏{
光标：指针；
空白：nowrap；
背景色：#1f2127；
颜色：#CBCB；
最小宽度：0；
文本溢出：省略号；
z指数：299；
顶部：0px；
左：0px；
宽度：100%；
高度：32px；
浮动：无；
位置：固定；
边界间距：0px；
}
td.cell-center{
文本对齐：居中；
}
.细胞中心表{
保证金：0自动；
}
.标题表{
高度：32px；
边界：无；
边界间距：0px；
}
td.header\u rtd{
右侧填充：12px；
}
td.U有限公司{
左侧填充：12px；
}
.搜索包装器{
最大宽度：124px；
背景色：红色；
填充：4px；
}
.隐藏内容{
显示：无；
}

左1
左2
居中
居中
隐藏内容
对1
对2
一个快速解决方案是给父元素一个
最大宽度
等于元素的初始宽度。这样做时，元素仍将相对于初始宽度居中，因为
输入
元素的动画宽度不会影响父元素的宽度


作为补充说明，您不需要jQuery/JS来设置宽度的动画，您可以简单地使用CSS转换和


您的第一个解决方案看起来像我想要的，但只是好奇，您为什么要使用124px？@ChaseRocker来解释两侧的
1px
填充/边框（
1px
*
4
===
4px
）<代码>120px

=>

124px

。我想您可以添加

框大小：边框框

来说明这一点。这取决于你。好吧，我就是这么想的，只是想确定一下。谢谢你的帮助！尝试解决方案后，实际上还有一个问题。在我的例子中，我去掉了我正在做的一些其他东西，但是当我使用你的建议时，它不太起作用，因为我实际上也在显示容器…它有一个不同的背景颜色。这意味着它也需要扩张。它还包含一个隐藏的div，我正在显示和隐藏它。您可以看看上面更新的JSFIDLE吗？thnxClose…你也能从中得到隐藏的内容吗？该容器实际上是一个主题化的圆形边框容器，其中有图标、搜索输入和一个附加的组合框（隐藏字段）。

.search-wrapper {
  max-width: 124px;
}

.search-wrapper input.search {
  transition: 1s width ease;
  width: 120px;
}
.search-wrapper input.search:focus {
  width: 180px;
}