Javascript 有没有一种方法可以在两个元素之间创建不带填充或边距的空间？

我使用的是React Native，我有两个内联按钮，

搜索

和

添加

按钮：

我需要的是在这些按钮之间创建一些空间，而不影响左右边缘

以下是我使用JSX的方式：

    <View style={globalStyles.stretchContent}>
      <TouchableOpacity
        style={[
          globalStyles.touchableBtnDropOffItem,
          { backgroundColor: Colors.dropOffTabColor },
        ]}
      >
        <Text style={{ color: '#fff' }}>Search</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={[
          globalStyles.touchableBtnDropOffItem,
          { backgroundColor: Colors.dropOffTabColor },
        ]}
      >
        <Text style={{ color: '#fff' }}>Add</Text>
      </TouchableOpacity>
    </View>

正如你所知，React Native使用flexbox，我很难实现我所需要的。问题是，如果我应用边距，它会减少每个按钮末端的按钮宽度。例如：我需要搜索按钮与文本

所有乘客列表（9）

完全对齐。如果我应用

marginHorizontal

它将减小宽度，它将在两个按钮的两侧创建一个边距，这样它将不再与我提到的文本对齐

---

那么，在这种情况下我能做些什么呢？

最简单的方法是将按钮的宽度设置为略小于一半（

45%

或

40%

），然后浮动每个按钮（左侧浮动

搜索

，右侧浮动

添加

）：

（我认为下面的语法是正确的-如果它不是有效的React代码，请告诉我如何修复它）

---

解决这一问题的最简单方法是，为按钮保留一个宽度，并使用

justifyContent:“空格周围”

如果想要在按钮的左侧或右侧之间留出空格，也可以使用

justifyContent:“空格中间”

以你为例,

touchableBtnDropOffItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    alignContent: 'space-between',
    height: 36,
    marginTop: 20,
    borderRadius: 2,
    marginHorizontal: 5,
    width: '40%'
  },
  stretchContent: {
    flex: 1,
    color: white,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },

touchablebtndropoffice:{
对齐项目：“居中”，
为内容辩护：“中心”，
alignContent:'之间的空格'，
身高：36，
玛金托普：20，
边界半径：2，
弹性基准：45%，
},
拉伸内容：{
弹性：1，
颜色：白色，
flexDirection:'行'，
对齐项目：“居中”，
justifyContent:'之间的空间'，
}，

我不确定React是否正确，但总体思路是将按钮缩小40%，并将按钮分别向左和向右浮动，这将在两个按钮之间留出空间尝试在值之间留出空间是的，这对我很有用。我不得不删除

flex:1

和

marginHorizontal:5，

，这使得按钮变得全宽。太棒了！！我编辑了答案，以便在将来有人需要时更好地匹配您的工作解决方案。

<View style={globalStyles.stretchContent}>
  <TouchableOpacity
    style={[
      globalStyles.touchableBtnDropOffItem,
      { backgroundColor: Colors.dropOffTabColor; float: left; },
    ]}
  >
    <Text style={{ color: '#fff' }}>Search</Text>
  </TouchableOpacity>

  <TouchableOpacity
    style={[
      globalStyles.touchableBtnDropOffItem,
      { backgroundColor: Colors.dropOffTabColor; float: right; },
    ]}
  >
    <Text style={{ color: '#fff' }}>Add</Text>
  </TouchableOpacity>
</View>

  touchableBtnDropOffItem: {
    width: 45%,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    alignContent: 'space-between',
    height: 36,
    marginTop: 20,
    borderRadius: 2,
    marginHorizontal: 5,
  },

touchableBtnDropOffItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    alignContent: 'space-between',
    height: 36,
    marginTop: 20,
    borderRadius: 2,
    marginHorizontal: 5,
    width: '40%'
  },
  stretchContent: {
    flex: 1,
    color: white,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },