javascript - 如何将标题栏中的输入字段向右扩展

Question

我有一个标题栏，其中包含左对齐元素、居中元素和右对齐元素。在中心，我有多个元素和一个搜索输入字段。当搜索字段获得焦点时，我通过设置宽度动画使其变宽。现在，因为元素居中，所以它会向左和向右设置动画以使内容居中。我该如何更改它以保持对齐并将宽度向右扩展？

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

这是一个 JSFiddle...单击搜索字段以查看发生的情况:https://jsfiddle.net/L60g0j64/1/

编辑:我已使用下面建议的解决方案更新了它。我唯一的问题是输入周围的红色容器也应该扩展。

HTML/CSS/JS 片段

$('#search').focus(function() {
  $(this).val("");
  $('#hidden_content').css('display','inline');
  $(this).animate({width: '180px'}, 200);
});

$('#search').blur(function() {
  $(this).val('Search');
  $('#hidden_content').css('display','none');
  $(this).animate({width: '120px'}, 200);
});

.header-navbar {
cursor: pointer;
white-space: nowrap;
background-color: #1f2127;
color: #cbcbcb;
min-width: 0;
text-overflow: ellipsis;
z-index: 299;
top: 0px;
left: 0px;
width: 100%;
height: 32px;
float: none;
position: fixed;
border-spacing: 0px;
}
td.cell-center {
text-align: center;
}
.cell-center table {
margin: 0 auto;
}
.header-table {
height: 32px;
border: none;
border-spacing: 0px;
}
td.header_rtd {
padding-right:12px;
}
td.header_ltd {
padding-left:12px;
}
.search-wrapper {
  max-width: 124px;
  background-color: red;
  padding:4px;
}
.hidden_content{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="header-navbar" id="header" cellspacing="0" cellpadding="0">
  <tbody>
<tr>
  <td>
    <table class="header-table" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td class='header_rtd'>left1</td>
          <td class='header_rtd'>left2</td>
        </tr>
    </table>        
  </td>
  <td width=100% class='cell-center'>
    <table class="header-table" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td class='header_rtd'>center</td>
          <td class='header_rtd'>center</td>
          <td><div class="search-wrapper">
            <input class="search" id="search" style="width: 120px;" type="text" size="60" value="Search"/>
            <div class='hidden_content' id='hidden_content'>
              hidden content
            </div>
            </div></td>
        </tr>
      </tbody>
    </table>                
  </td>
  <td>
    <table class="header-table" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td class='header_ltd'>right1</td>
          <td class='header_ltd'>right2</td>
        </tr>
      </tbody>
    </table>        
  </td>
</tr>
  </tbody>
</table>

Answer 1

一个快速的解决方案是为父元素指定一个等于元素初始宽度的 max-width 。这样做时，元素仍将相对于初始宽度居中，因为 input 元素的动画宽度不会影响父元素的宽度。

Updated Example

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

作为旁注，您不需要 jQuery/JS 来设置宽度动画，您可以简单地使用 CSS 过渡以及 :focus pseudo-class .

Updated Example

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