Question

如何通过添加ID #search 来this搜索字段？我尝试将margin: 0 auto;和left: 50%;添加到 #search ，但都不起作用。

Answer 1

这是一个很好的阅读...... How To Center Anything With CSS

在您的情况下，只需添加width:265px;margin:auto并移除display:inline-block中的#search即可。

演示：http://codepen.io/anon/pen/ojbbmL

Answer 2

一种解决方案是添加一个容器进行搜索并使用text-align: center：

＆＃13;

@charset "utf-8";

/* CSS Document */

/* ---------- GENERAL ---------- */

body {
  background: #61646d;
  color: #000;
  font: 14px/1.5em"Open Sans", sans-serif;
  margin: 0;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
input {
  border: none;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5em;
  margin: 0;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
/* ---------- SEARCH ---------- */

#search {
  background: #42454e;
  border-radius: 3px;
  display: inline-block;
  padding: 7px;
}
#search input {
  float: left;
}
#search input[type="search"],
#search input[type="submit"] {
  border-radius: 3px;
  font-size: 12px;
}
#search input[type="search"] {
  background: #fff;
  color: #42454e;
  min-width: 184px;
  padding: 6px 8px;
}
#search input[type="submit"] {
  background: #1bba9a;
  color: #fff;
  font-weight: bold;
  margin-left: 7px;
  padding: 6px 10px;
}
#search input[type="submit"]:hover {
  background: #189e83;
}
#search input[type="search"]::-webkit-input-placeholder {
  color: #42454e;
}
#search input[type="search"]:-moz-placeholder {
  color: #42454e;
}
#search input[type="search"]:-ms-input-placeholder {
  color: #42454e;
}
.searchCont {
  text-align: center;
}

＆＃13;

<html lang="en-US">

<head>

  <meta charset="utf-8">

  <title>Search</title>

  <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

  <!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

</head>

<body>
  <div class="searchCont">
    <div id="search">

      <form action="javascript:void(0);" method="GET">

        <fieldset class="clearfix">

          <input type="search" name="search" value="What are you looking for?" onBlur="if(this.value=='')this.value='What are you looking for?'" onFocus="if(this.value=='What are you looking for?')this.value='' ">
          <!-- JS because of IE support; better: placeholder="What are you looking for?" -->
          <input type="submit" value="Search" class="button">

        </fieldset>

      </form>

    </div>
    <!-- end search -->
  </div>

</body>

</html>

＆＃13;

Answer 3

您只需在<div id="container">之前添加<div id="search">，如下所示：

<强> HTML：

<div id="container">
  <div id="search">
    <form action="javascript:void(0);" method="GET">
      // same line of codes
   </form>
  </div> <!-- end search -->
</div> <!-- end container -->

只需在css文件中添加以下代码：

<强> CSS：

#container{
  width: 100%;
  text-align: center;
}

工作代码段

@charset "utf-8";

/* CSS Document */

/* ---------- GENERAL ---------- */

body {
  background: #61646d;
  color: #000;
  font: 14px/1.5em"Open Sans", sans-serif;
  margin: 0;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
input {
  border: none;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5em;
  margin: 0;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
#container {
  width: 100%;
  text-align: center;
}
/* ---------- SEARCH ---------- */

#search {
  background: #42454e;
  border-radius: 3px;
  display: inline-block;
  padding: 7px;
  margin: 0 auto;
}
#search input {
  float: left;
}
#search input[type="search"],
#search input[type="submit"] {
  border-radius: 3px;
  font-size: 12px;
}
#search input[type="search"] {
  background: #fff;
  color: #42454e;
  min-width: 184px;
  padding: 6px 8px;
}
#search input[type="submit"] {
  background: #1bba9a;
  color: #fff;
  font-weight: bold;
  margin-left: 7px;
  padding: 6px 10px;
}
#search input[type="submit"]:hover {
  background: #189e83;
}
#search input[type="search"]::-webkit-input-placeholder {
  color: #42454e;
}
#search input[type="search"]:-moz-placeholder {
  color: #42454e;
}
#search input[type="search"]:-ms-input-placeholder {
  color: #42454e;
}

<html lang="en-US">

<head>

  <meta charset="utf-8">

  <title>Search</title>

  <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

  <!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

</head>

<body>
  <div id="container">
    <div id="search">

      <form action="javascript:void(0);" method="GET">

        <fieldset class="clearfix">

          <input type="search" name="search" value="What are you looking for?" onBlur="if(this.value=='')this.value='What are you looking for?'" onFocus="if(this.value=='What are you looking for?')this.value='' ">
          <!-- JS because of IE support; better: placeholder="What are you looking for?" -->
          <input type="submit" value="Search" class="button">

        </fieldset>

      </form>

    </div>
    <!-- end search -->
  </div>
  <!-- end container -->

</body>

</html>

CSS - 中心搜索表单

3 个答案: