时间戳

首页 > 解决方案 > 如何让输入在两边展开？

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

问题描述

我有一个带有下面 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%; 
}

标签： htmlcss

解决方案

Wrap search input with div and define text-align:center on wrapped div.
Follow below snippet:

.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>

推荐阅读