Html 如何使两个元素在一行中获得一半空间

我尝试将两个元素

input

type text和

input

type按钮放在一行中，每个元素占一半的空间

以下是我如何实现这一目标的：

#我的名片{
边框样式：实心；
边界宽度：薄；
填充：12px 5px 5px 5px；
}
半幅{
职位：相对；；
宽度：50%；
}

---

您可以将display:flex添加到#myCard中，正如Tanner所提到的那样，更改为.myCard

.myCard{
  border-style: solid;
  border-width: thin; 
  padding: 12px 5px 5px 5px;
  display: flex;
}

---

问题是，您在html上使用类，并在css上调用id，此外，您没有为父myCard指定宽度。而且名字是错的

试试这个：

.myCard{
宽度：100%；
边框样式：实心；
边界宽度：薄；
填充：12px 5px 5px 5px；
}
半幅{
职位：相对；；
宽度：49%；
显示：内联块；
垂直对齐：中间对齐；
}

---

使用

显示：flex将允许两个子元素收缩一点，并将它们放在一行中。（并在容器上使用class或ID…）


.myCard{
边框样式：实心；
边界宽度：薄；
填充：12px 5px 5px 5px；
显示器：flex；
对齐项目：居中；
}
半幅{
宽度：50%；
}

在CSS中，立即将
#myCard
更改为
。myCard
作为一个类选择器，而不是。如果您纠正了输入错误（“半宽”/“半宽”），结果与问题中的结果相同…不，50%不准确使用display:inline block，您可以使用float:left，相反，您需要声明位置：relative和overflow：对父亲隐藏，然后50%将起作用。检查de代码段，它们看起来宽度相等，并且彼此相邻。display:flex和flex:2也很好用