html - 如何让输入在两边展开？

Question

我有一个带有下面 css 的输入栏。每次选择它时，它都应该扩展。但是，它只扩展到左侧而不扩展到右侧。 (我希望它在右侧展开)这可能是重复的，所以如果是，请将其标记为一个。但是，我只是找不到任何告诉我如何执行此操作的内容？

html:

<input placeholder = "search something up"id = "searchbar" name = "search">

css:

#searchbar{
  margin-left: 10px;
  background: #FFF;
  padding: 1px 1px 1px 5px;
  position: relative; top: 0; left: 0;
  width: 178px;
  height: 21px;
  outline: none;
  border: 1px solid #CCCCCC;

  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

#searchbar:focus{
  width: 100%;
  background: #FFF;
  padding: 1px 1px 1px 5px;
  width: 300px;
  height: 21px;
  border: 1px solid #CCCCCC;
  top: 0;
  right: 100%; 
}

Answer 1

换行搜索 input使用 div 并定义 text-align:center在包裹的 div 上。
遵循以下片段:

.input-wrap{
  text-align: center;
}	
#searchbar{
  background: #FFF;
  padding: 1px 1px 1px 5px;
  position: relative; top: 0; left: 0;
  width: 178px;
  height: 21px;
  outline: none;
  border: 1px solid #CCCCCC;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  text-align: center;
}
#searchbar:focus{
  width: 100%;
  width: 300px;
}

<div class="input-wrap">
  <input type="text" name="search" id="searchbar" placeholder="Search">
</div>