无需单独CSS文件，在React中将Select组件与Button组件置于同一行且按钮紧随Select右侧的实现方法

嘿，看了你的代码（应该是用的Ant Design组件吧？），想让Button紧贴Select右侧的话，不用单独创建CSS文件，这几个方案都能搞定：

方案1：用内联Flex布局（最推荐） #

给包裹Select和Button的外层div加个内联flex样式，就能让它们在同一行，还能轻松控制贴合度：

return ( <>
 <div style={{ display: 'flex', gap: '0' }}> {/* gap设为0直接消除组件间的间距 */}
 <Select 
  {...props} 
  mode="multiple" 
  labelInValue 
  showArrow 
  options={scopes && scopes.map((scope) => ({ value: scope.scopeId, data: scope }))} 
  loading={!scopes || scopes.notLoaded} 
  onFocus={fetchData} 
  placeholder={'Choose existing scopes'} 
  notFoundContent={notFoundContent} 
  onSearch={onSearch} 
  onChange={handleChange} 
  value={selectedScopes && selectedScopes.map((_) => ({ value: _.scopeId, data: _ }))} 
  style={{ flex: 1 }} {/* 可选：让Select占满剩余宽度，根据你的布局需求来 */}
 />
 <Button 
  type="primary" 
  disabled={isCreationVisible} 
  onClick={() => showModal()}
  style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }} {/* 可选：去掉Button左侧圆角，视觉上更像一个整体 */}
 > Create </Button>
 </div>
 <ScopeCreationForm initialId={searchValue} visible={isCreationVisible} nameUniqValidator={nameUniqValidator} onCreate={handleCreate} onCancel={handleCancel} />
 </> )

为啥推荐这个？因为flex布局现在是处理这类横向排列的标准方案，代码简洁还不容易出问题。flex:1可以让Select自动撑满容器的剩余空间，如果你不需要Select太宽，也可以去掉这个样式。

方案2：行内块元素方案 #

要是你不想用flex，也能把两个组件改成行内块元素，再消除默认间距：

return ( <>
 <div style={{ fontSize: 0 }}> {/* 消除行内块之间的空白字符间距 */}
 <Select 
  {...props} 
  mode="multiple" 
  labelInValue 
  showArrow 
  options={scopes && scopes.map((scope) => ({ value: scope.scopeId, data: scope }))} 
  loading={!scopes || scopes.notLoaded} 
  onFocus={fetchData} 
  placeholder={'Choose existing scopes'} 
  notFoundContent={notFoundContent} 
  onSearch={onSearch} 
  onChange={handleChange} 
  value={selectedScopes && selectedScopes.map((_) => ({ value: _.scopeId, data: _ }))} 
  style={{ display: 'inline-block', marginRight: 0 }} 
 />
 <Button 
  type="primary" 
  disabled={isCreationVisible} 
  onClick={() => showModal()}
  style={{ display: 'inline-block', marginLeft: 0, borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
 > Create </Button>
 </div>
 <ScopeCreationForm initialId={searchValue} visible={isCreationVisible} nameUniqValidator={nameUniqValidator} onCreate={handleCreate} onCancel={handleCancel} />
 </> )

这个方案要注意外层div的fontSize:0，因为行内块元素之间的空白字符会产生间距，把字体设为0就能消除这个问题。

方案3：用AntD的Space组件（如果项目里已经用了AntD） #

如果你的项目是基于Ant Design 4及以上版本，直接用Space组件最省事，设置size={0}就能让组件紧贴：

import { Space } from 'antd'; // 记得先引入Space组件

return ( <>
 <Space size={0}>
 <Select 
  {...props} 
  mode="multiple" 
  labelInValue 
  showArrow 
  options={scopes && scopes.map((scope) => ({ value: scope.scopeId, data: scope }))} 
  loading={!scopes || scopes.notLoaded} 
  onFocus={fetchData} 
  placeholder={'Choose existing scopes'} 
  notFoundContent={notFoundContent} 
  onSearch={onSearch} 
  onChange={handleChange} 
  value={selectedScopes && selectedScopes.map((_) => ({ value: _.scopeId, data: _ }))} 
 />
 <Button 
  type="primary" 
  disabled={isCreationVisible} 
  onClick={() => showModal()}
  style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
 > Create </Button>
 </Space>
 <ScopeCreationForm initialId={searchValue} visible={isCreationVisible} nameUniqValidator={nameUniqValidator} onCreate={handleCreate} onCancel={handleCancel} />
 </> )

Space组件是AntD专门用来管理组件间距的，用它的话不用自己折腾布局细节，直接设置size={0}就达到紧贴效果了，非常省心。

内容的提问来源于stack exchange，提问作者denisoda