CSS如何对齐文本框和其旁边的图像按钮比如搜索框等等

在 CSS 中，我们可以使用多种方法来对齐文本框和其旁边的图像按钮，例如搜索框等。下面是完整攻略，包含了如何使用 CSS 实现对齐的过程和两个示例说明。

CSS 实现对齐文本框和其旁边的图像按钮

步骤一：使用 display:inline-block 属性

我们可以使用 display:inline-block 属性来对齐文本框和其旁边的图像按钮。例如：

<div class="container">
  <input type="text" placeholder="Search...">
  <button><img src="search.png" alt="Search"></button>
</div>

.container {
  display: inline-block;
  position: relative;
}

input {
  padding-right: 40px;
  box-sizing: border-box;
}

button {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background-color: transparent;
  border: none;
  outline: none;
}

button img {
  width: 100%;
  height: 100%;
}

上述代码中，我们创建了一个名为“container”的 div 元素，并将其 display 属性设置为 inline-block。我们还将其 position 属性设置为 relative。我们还创建了一个名为“input”的 input 元素，并将其 padding-right 属性设置为 40 像素，以使其右侧留出空间放置图像按钮。我们还将其 box-sizing 属性设置为 border-box，以使其 padding 不会影响其宽度。我们还创建了一个名为“button”的 button 元素，并将其 position 属性设置为 absolute。我们还将其 top 和 right 属性设置为 0，以使其位于 input 元素的右上角。我们还将其 width 属性设置为 40 像素，以使其与 input 元素的 padding-right 属性相同。我们还将其 height 属性设置为 100%，以使其与 input 元素的高度相同。我们还将其 background-color、border 和 outline 属性设置为 none，以使其看起来像一个图像按钮。我们还将图像按钮的 img 元素的 width 和 height 属性设置为 100%，以使其填充整个按钮。

步骤二：使用 float 属性

另一种方法是使用 float 属性来对齐文本框和其旁边的图像按钮。例如：

<div class="container">
  <input type="text" placeholder="Search...">
  <button><img src="search.png" alt="Search"></button>
</div>

.container {
  overflow: hidden;
}

input {
  float: left;
  width: calc(100% - 40px);
  padding-right: 40px;
  box-sizing: border-box;
}

button {
  float: right;
  width: 40px;
  height: 100%;
  background-color: transparent;
  border: none;
  outline: none;
}

button img {
  width: 100%;
  height: 100%;
}

上述代码中，我们创建了一个名为“container”的 div 元素，并将其 overflow 属性设置为 hidden。我们还创建了一个名为“input”的 input 元素，并将其 float 属性设置为 left。我们还将其 width 属性设置为 calc(100% - 40px)，以使其宽度为容器宽度减去图像按钮的宽度。我们还将其 padding-right 属性设置为 40 像素，以使其右侧留出空间放置图像按钮。我们还将其 box-sizing 属性设置为 border-box，以使其 padding 不会影响其宽度。我们还创建了一个名为“button”的 button 元素，并将其 float 属性设置为 right。我们还将其 width 属性设置为 40 像素，以使其与 input 元素的 padding-right 属性相同。我们还将其 height 属性设置为 100%，以使其与 input 元素的高度相同。我们还将其 background-color、border 和 outline 属性设置为 none，以使其看起来像一个图像按钮。我们还将图像按钮的 img 元素的 width 和 height 属性设置为 100%，以使其填充整个按钮。

示例说明

下面是两个示例，演示了如何使用 CSS 实现对齐文本框和其旁边的图像按钮。

示例一：使用 display:inline-block 属性

<div class="container">
  <input type="text" placeholder="Search...">
  <button><img src="https://via.placeholder.com/20x20" alt="Search"></button>
</div>

.container {
  display: inline-block;
  position: relative;
}

input {
  padding-right: 40px;
  box-sizing: border-box;
}

button {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background-color: transparent;
  border: none;
  outline: none;
}

button img {
  width: 100%;
  height: 100%;
}

示例二：使用 float 属性

<div class="container">
  <input type="text" placeholder="Search...">
  <button><img src="https://via.placeholder.com/20x20" alt="Search"></button>
</div>

.container {
  overflow: hidden;
}

input {
  float: left;
  width: calc(100% - 40px);
  padding-right: 40px;
  box-sizing: border-box;
}

button {
  float: right;
  width: 40px;
  height: 100%;
  background-color: transparent;
  border: none;
  outline: none;
}

button img {
  width: 100%;
  height: 100%;
}

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS如何对齐文本框和其旁边的图像按钮比如搜索框等等 - Python技术站