我正在try 使用HTML和CSS创建一个搜索框,其中包含一个文本输入标记和一个按钮输入标记,这两个标记都位于其中.但是CSS代码对我的按钮标签不起作用,尽管它对另一个标签起作用.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
}

.search-box {
  height: 50px;
  width: 280px;
  border: 1px solid #DCDCDC;
  background-color: #F5F5F5;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 2px 2px 1px #D3D3D3, -2px 2px 1px #D3D3D3;
}

#input-search {
  width: 200px;
  height: 30px;
  border: 1px solid #DCDCDC;
  margin: 9px 10px 9px 9px;
  border-radius: 5px;
  text-indent: 3px;
}

#btn {
  height: 30px;
  width: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #008080;
  display: inline-block;
  margin: 9px 9px 9px 0;
  background-image: linear-gradient(#20B2AA, #5F9EA0);
}
<div class="search-box">
  <input type="text" id="input-search" placeholder="search">
  <input type="button" value="GO" id="btn">
</div>

根据我的计算,两边的边距应该使两个标记完全位于div的中心,但似乎有一些*{margin:0; padding:0;box-sizing:border-box;}无法清除的填充或边距.

该按钮不能垂直居中,也不能与文本标记对齐显示.谁能帮我修一下按钮标签吗?

以下是完整代码:https://codepen.io/mayiscoding/pen/qBxLbYb

推荐答案

根据我的计算,两边的边距应该使两个标签完全位于div的中心

你的计算不完全正确,你所做的是200+9+10+50+9,也就是278,这似乎适合宽度为278的元素.但你没有包括的是新行(Why does the browser renders a newline as space?)引入的两个input元素之间的空间.

如果删除该新行,它将起作用:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
}

.search-box {
  height: 50px;
  width: 280px;
  border: 1px solid #DCDCDC;
  background-color: #F5F5F5;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 2px 2px 1px #D3D3D3, -2px 2px 1px #D3D3D3;
}

#input-search {
  width: 200px;
  height: 30px;
  border: 1px solid #DCDCDC;
  margin: 9px 10px 9px 9px;
  border-radius: 5px;
  text-indent: 3px;
}

#btn {
  height: 30px;
  width: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #008080;
  display: inline-block;
  margin: 9px 9px 9px 0;
  background-image: linear-gradient(#20B2AA, #5F9EA0);
}
<div class="search-box">
  <input type="text" id="input-search" placeholder="search"><!--
  --><input type="button" value="GO" id="btn">
</div>

但为了避免此类问题,您可能希望使用display: flex,而不是手动计算元素的正确宽度.

  • .search-box中的display设置为flex.
  • 拆除input个元件中的widthheight,flex将处理该问题.
  • 设置所需的padding,而不是将width设置为#btn.
  • #input-search上使用flex: 1 1 auto;使其拉伸,并使用可用的尺寸.

这样,您就可以更改.search-box中的width,而无需更改输入元素的宽度,还可以更新按钮和文本的字体大小.通过将with更改为max-width,您甚至可以使.search-box响应.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
}

.search-box {
  height: 50px;
  width: 280px;
  border: 1px solid #DCDCDC;
  background-color: #F5F5F5;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 2px 2px 1px #D3D3D3, -2px 2px 1px #D3D3D3;
  display: flex;
}

#input-search {
  border: 1px solid #DCDCDC;
  margin: 9px 10px 9px 9px;
  border-radius: 5px;
  text-indent: 3px;
  flex: 1 1 auto;
}

#btn {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #008080;
  display: inline-block;
  margin: 9px 9px 9px 0;
  padding-left: 15px;
  padding-right: 15px;
  background-image: linear-gradient(#20B2AA, #5F9EA0);
}
<div class="search-box">
  <input type="text" id="input-search" placeholder="search">
  <input type="button" value="GO" id="btn">
</div>

为了进一步改进CSS,我将从input个元素中删除margin,并在.search-boxgap上将其更改为padding.而不是px单位padding单位#btn我会用em.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
}

.search-box {
  height: 50px;
  width: 280px;
  border: 1px solid #DCDCDC;
  background-color: #F5F5F5;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 2px 2px 1px #D3D3D3, -2px 2px 1px #D3D3D3;
  display: flex;
  padding: 9px;
  gap: 10px;
}

#input-search {
  border: 1px solid #DCDCDC;
  border-radius: 5px;
  text-indent: 3px;
  flex: 1 1 auto;
}

#btn {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #008080;
  display: inline-block;
  padding-left: 1.2em;
  padding-right: 1.2em;
  background-image: linear-gradient(#20B2AA, #5F9EA0);
}
<div class="search-box">
  <input type="text" id="input-search" placeholder="search">
  <input type="button" value="GO" id="btn">
</div>

Html相关问答推荐

将弹性容器设置为内容宽度

如何在html和css中创建动态调整大小的表元素

我应该怎么做才能显示出整个字符串?

在将DevExtreme升级到版本23.2之后,到处都会生成一个Pesudo类,我在其中使用了<;DXi-Item Title=&Quot;&Quot;>;

carousel 的垂直滚动按钮居中

Swift 以编程方式在 YouTube 嵌入视频中进入全屏

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单?

如何调整边框半径以匹配父边框半径

如何使用CSS将页面标题水平居中对齐

使用 R markdown 在 html 中包含图像

将图像高度调整到容器 div 中而不使其高度增加

重点/主动输入的概述问题

如何使用 CSS 制作蜂窝状网格?

是否可以设置用户在联系表单中输入的文本字体的样式

浮动元素忽略 margin-top 属性后的块元素

是否可以使用纯 css 创建具有斜角效果的锯齿形边缘?

将鼠标悬停在其他单词上时更改文本 colored颜色

当父容器包含多个元素时,CSS hover margin-top 更改不起作用

Svelte 将 svg 作为组件导入工作很奇怪

HTML CSS 响应式卡片