如何不使用 在内联元素之间添加空间
如何不使用 在内联元素之间添加空间
提问于 2021-03-04 04:25:12
我必须在两个输入字段之间添加空间，而不使用 。我也尝试过添加{' '}，但这并没有什么不同
如下所示：
return (
<div className="side-by-side">
<Input
style={{ marginRight: 100 }}
classname="flex w-49"
label="first name"
type="text"
placeholder="Enter first name..."
inputId="basicInput"
value={obj.firstName}
></Input>
{' '}
<Input
classname="flex w-49"
label="last name"
type="text"
placeholder="Enter last name..."
inputId="basicInput"
value={obj.lastName}
></Input>
</div>这是我用来把它们放在同一行中的css
.side-by-side {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 4px; //also tried to add a margin but that didn't work
}回答 3
Stack Overflow用户
回答已采纳
发布于 2021-03-04 04:32:55
当您将margin-left放在side-by-side容器上时，当您只需要对正确的输入进行边距时，它就会对整个容器产生影响。
不是所有浏览器都完全支持的一个简单解决方案是将gap放在父服务器上，如下所示：
.side-by-side {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
}Gap非常简单地在元素之间设置了一个空白，但是正如我所说的，早期的浏览器并不完全支持这一点，所以其他的方法就是使用所谓的“滚轴化的猫头鹰”，您可以读到关于这里的内容。
总之，它将获取所有具有前一个兄弟关系的子元素，这意味着它将获得除第一个子元素之外的所有子元素，并且如果您想要添加更多输入，则是可伸缩的。
你可以试着这样做：
.side-by-side {
display: flex;
flex-direction: row;
align-items: center;
}
.side-by-side > * + *{
margin-left: 4px;
}Stack Overflow用户
发布于 2021-03-04 04:48:39
尝试将输入添加到单独的div中。
<div className="side-by-side">
<div style="margin-right:100px;">
<Input
style={{ marginRight: 100 }}
classname="flex w-49"
label="first name"
type="text"
placeholder="Enter first name..."
inputId="basicInput"
value={obj.firstName}
></Input>
</div>
{' '}
<Input
classname="flex w-49"
label="last name"
type="text"
placeholder="Enter last name..."
inputId="basicInput"
value={obj.lastName}
></Input>
</div>Stack Overflow用户
发布于 2021-03-04 04:32:04
在您的示例中，您使用类margin-left向父div提供了.side-by-side，而需要将它提供给input元素。
下面是片段
.side-by-side {
display: flex;
flex-direction: row;
align-items: center;
}
.side-by-side > input:last-of-type{
margin-left: 25px;
}<div class="side-by-side">
<input class="flex w-49" label="first name" type="text" placeholder="Enter first name..."></Input>
<input class="flex w-49" label="last name" type="text" placeholder="Enter last name..."></Input>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66468580
复制相关文章
相似问题
腾讯云开发者
