1

我做自适应搜索表单。搜索字段应采用100%父 div 的宽度（父 div 的宽度将根据设备的分辨率而变化）。“搜索”按钮应始终位于该字段的右侧，不要向下移动。

一个工作版本。

但是有一个问题：文本“立即搜索”（占位符）太靠近字段边缘，我无法将其移到右侧。在其他示例中，它按字段填充的设置值移动。但是如果我改变填充——字段本身会向左移动，但我只需要移动文本！

#searchfield {
   padding: 10px 0 13px 0; /* Try to change the left padding here! All field shifts to the left! But I need only shift the placeholder text to right! */
}
4

3 回答 3

4

尝试为 id搜索字段添加 text-align:center 或添加box-sizing:border-box; 宣言。

尝试使用以下任何一个示例，它将按您的预期将占位符移动到右侧，这些也将支持 Ie 较低版本。

Example1（使用 box-sizing:border-box 声明）

#searchfield {
     padding: 10px 0 13px 0px;
     box-sizing: border-box;
}

示例 2（使用 text-align:center 声明）

#searchfield {
      text-align:center;
}
于 2015-03-08T07:41:54.163 回答
2

您仍然可以使用声明padding来移动占位符文本box-sizing: border-box;。

box-sizing: border-box;使用户代理包含padding/border到width/height的框。

#searchfield {
  width: 100%;
  border: 1px solid #ccc;
  padding: 10px 0 13px 10px;
  box-sizing: border-box;
  /* other declarations... */
}

由于简洁而省略了供应商前缀。

#sidebar {
  width: 20%;
  background: #ccc;
  height: 300px;
  padding: 20px;
}
#search {
  width: 100%;
  height: 50px;
  position: relative;}
#searchfield {
  width: 100%;
  border: 1px solid #ccc;
  margin: 0;
  padding: 12px 0 13px 10px;
  box-sizing: border-box;
  position: absolute;
  right: 0;
}
#searchsubmit {
  width: 60px;
  height: 41px;
  background: red 0 0;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  right: 0;
  position: absolute;
}
<html>
 <body>
  <div id="sidebar">
    <div id="search">
      <form id="searchform" method="get" action="/index.php" _lpchecked="1">
      <input type="text" name="s" id="searchfield" placeholder="Search now">
      <input type="submit" id="searchsubmit" value="Search">
      </form>
     </div>
   </div>
 </body>
</html>

值得一提的border-box 是，IE8+以及现代网络浏览器都支持这一点。

于 2015-03-08T07:41:34.327 回答
0

无需使用绝对位置。试试这个代码：

<html>
 <body>
  <div id="sidebar">
    <div id="search">
      <form id="searchform" method="get" action="/index.php" _lpchecked="1">
      <input type="text" name="s" id="searchfield" placeholder="Search now">
      <input type="submit" id="searchsubmit" value="Search">
      </form>
     </div>
   </div>
 </body>
</html>


#sidebar {
  width: 20%;
  background: #ccc;
  height: 300px;
  padding: 20px;
}
#search {
  width: 100%;
  height: 50px;
  position: relative;}
#searchfield {
  width: calc(100% - 60px);
  border: 1px solid #ccc;
  margin: 0;
  padding: 10px 0 13px 20px; /* Try to change the left padding here! All field shifts to the left! But I need only shift the placeholder text to right! 
  position: absolute;*/
  right: 0;
  float:left;
  box-sizing:border-box;
}
#searchsubmit {
  width: 60px;
  height: 41px;
  background: red 0 0;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  right: 0; 
  float:left;
  box-sizing:border-box;
}

代码笔上的现场演示

于 2015-03-08T07:58:27.057 回答