如何在不使用 &nbsp 的情况下在行内元素之间添加空格 [重复]答案

【问题标题】：How to add space between in-line elements without using &nbsp [duplicate]如何在不使用 &nbsp 的情况下在行内元素之间添加空格 [重复]
【发布时间】：2021-06-02 17:16:06
【问题描述】：

我必须在不使用&nbsp 的情况下在两个输入字段之间添加空格。我也尝试过添加{' '}，但这没有任何区别

这是它们的呈现方式：

       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
}

【问题讨论】：

您需要为您的输入留出余量
即使我添加了边距，似乎也没有什么不同

标签： css reactjs

【解决方案1】：

在您的示例中，您已将 margin-left 提供给具有 .side-by-side 类的父 div，而您需要将其提供给 input 元素。

下面是sn-p

.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>

【讨论】：

【解决方案2】：

当您将margin-left 放在side-by-side 容器上时，当您只想在右侧输入上留出边距时，它会在整个容器上留出边距。

一个尚未在所有浏览器中完全支持的简单解决方案是将gap 放在父级上，如下所示：

.side-by-side {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

Gap 非常简单地在元素之间设置了一个间隙，但就像我说的那样，早期的浏览器并不完全支持这一点，所以其他的方法是使用所谓的“叶状体猫头鹰”，你可以阅读 here。

总而言之，它会获取所有具有前一个兄弟元素的子元素，这意味着它将获取除第一个子元素之外的所有子元素，并且如果您想添加更多输入，它是可扩展的。

您可以尝试这样做：

.side-by-side {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.side-by-side > * + *{
    margin-left: 4px;
}

【讨论】：

【解决方案3】：

尝试在单独的 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>

【讨论】：