html搜索框居中功能实现

以下是两种HTML搜索框居中功能实现的例子：

1.使用flex布局实现搜索框居中

<div style="display: flex; justify-content: center;">
  <input type="text" placeholder="请输入商品">
  <input type="button" value="搜索">
</div>

2.使用text-align属性实现搜索框居中

<div style="text-align: center;">
  <input type="text" placeholder="请输入商品">
  <input type="button" value="搜索">
</div>

相关问题

HTML如何在网页中加一个搜索框,基于html css实现带搜索图标的搜索框功能

您可以使用以下 HTML 和 CSS 代码来创建一个带搜索图标的搜索框：

HTML 代码：

<div class="search-box">
  <form action="/search" method="get">
    <input type="text" placeholder="Search...">
    <button type="submit"><i class="fa fa-search"></i></button>
  </form>
</div>

CSS 代码：

.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}

input[type="text"] {
  padding: 10px;
  border: none;
  border-radius: 5px 0 0 5px;
  width: 200px;
  font-size: 16px;
}

button[type="submit"] {
  padding: 10px 15px;
  background-color: #4CAF50;
  border: none;
  border-radius: 0 5px 5px 0;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

i.fa.fa-search {
  font-size: 16px;
  margin-right: 5px;
}

这里的 HTML 代码中包含一个名为 `search-box` 的 div 元素，用于设置搜索框的样式。在 div 元素内部，使用了 form 元素和 input 元素来创建搜索框，使用了 button 元素和 i 元素来创建搜索按钮和搜索图标。`placeholder` 属性提供了默认的提示文本，`name` 属性指定了提交的参数名称。

CSS 代码中使用了 `display: flex` 属性和 `justify-content: center` 和 `align-items: center` 属性来将搜索框水平居中。`border-radius` 属性用于设置输入框和按钮的圆角，`padding` 属性用于设置输入框和按钮的内边距，`width` 属性用于设置输入框的宽度。`background-color` 属性用于设置按钮的背景颜色，`color` 属性用于设置按钮的文字颜色，`cursor` 属性用于设置鼠标悬停时的光标类型。`fa` 和 `fa-search` 类名用于引用 Font Awesome 图标库中的搜索图标样式。

请注意，这里使用了 Font Awesome 图标库，您需要在页面中引入该库的 CSS 样式文件，例如：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

HTML如何在网页中加一个搜索框,基于html css实现带搜索响应式图标的搜索框功能

以下是基于 HTML 和 CSS 实现带搜索响应式图标的搜索框的代码：

HTML 代码：

<div class="search-box">
  <form action="/search" method="get">
    <input type="text" placeholder="Search...">
    <button type="submit"><i class="fa fa-search"></i></button>
  </form>
</div>

CSS 代码：

/* 搜索框样式 */
.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}

input[type="text"] {
  padding: 10px;
  border: none;
  border-radius: 5px 0 0 5px;
  width: 200px;
  font-size: 16px;
}

button[type="submit"] {
  padding: 10px 15px;
  background-color: #4CAF50;
  border: none;
  border-radius: 0 5px 5px 0;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

i.fa.fa-search {
  font-size: 16px;
  margin-right: 5px;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .search-box {
    flex-direction: column;
    margin: 0 20px;
  }

  input[type="text"] {
    border-radius: 5px;
    margin-bottom: 10px;
    width: 100%;
  }

  button[type="submit"] {
    border-radius: 5px;
    width: 100%;
  }
}

在 HTML 代码中，我们使用了一个 `div` 元素包含一个 `form` 元素，`form` 元素中包含一个 `input` 元素和一个 `button` 元素。在 `input` 元素中，我们添加了一个 `placeholder` 属性用于设置默认提示文本，`name` 属性用于设置提交参数的名称。在 `button` 元素中，我们使用了 Font Awesome 图标库中的搜索图标样式。

在 CSS 代码中，我们使用了 `display: flex` 属性和 `justify-content: center` 和 `align-items: center` 属性来将搜索框水平居中，并使用 `margin` 属性设置搜索框的外边距。我们使用 `border-radius` 属性设置输入框和按钮的圆角，`padding` 属性设置输入框和按钮的内边距，`width` 属性设置输入框的宽度。使用 `background-color` 属性设置按钮的背景颜色，`color` 属性设置按钮的文字颜色，`cursor` 属性设置鼠标悬停时的光标类型。

在 CSS 代码的最后，我们添加了一个媒体查询，当屏幕宽度小于 768 像素时，搜索框将转换为垂直方向布局，并将输入框和按钮的圆角设置为相同的值，`width` 属性设置为 100%。这样可以使搜索框在移动设备上更加友好。

请注意，这里使用了 Font Awesome 图标库，您需要在页面中引入该库的 CSS 样式文件，例如：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">