Question

我正在使用React，我需要像这样放置此按钮：

但是我有一个大问题，因为我被禁止使用边距或其他形式的位置，其中我的值基本上是px或rem，即静态位置。现在，我有了这段代码

<div style={{ float: 'right' }}>
      <ActionButton style={{
        display : 'flex', 
        flex : '1',
        flexDirection: 'row',
        alignItems : 'center', 
        justifyContent : 'center',
        height: '40px',
        width: '151px',

      }} name={<div style = {{
        display : 'flex',
        flex : '2',
      backgroundColor : 'red', 
      float : 'right'
    }}>FILTRAR</div>} 
      icon={<div style = {{
        display : 'flex',
        flex : '2',
      backgroundColor : 'blue',
      width: '24px',
      height: '24px',
      float : 'left'}}><FilterIcon/></div>}>
      </ActionButton>
    </div>

现在我的按钮就是这样

Answer 1

您可以使用以％（即50％）为单位的边距，然后使用以百分比（即transform：translateX（-50％））为单位的变换来调整位置。如果您可以提供静态的可样式化html，我可以生成一个给你的例子。

Answer 2

父项的样式应该已经使子项（名称和图标）在中心而不是在顶部对齐。是的，不需要定位样式，除非孩子本身具有硬编码的高度/边距值。

由于ActionButton的实施，可能会破坏预期的行为。

无论如何，我对解决此问题的建议：

使用flex-direction: 'row-reverse'代替float；
从子元素中删除display: 'flex'。

这是一个简化的https://codesandbox.io/s/62nynm1wzk网络示例，希望它可以帮助您入门。

更新：以下是使用button代替div作为容器的示例，因为它更接近原始标记：https://codesandbox.io/s/y7q1vlwkwj

Answer 3

尝试删除名称和图标道具中的 flex 和 display 样式属性，如下所示，然后进行检查。因为 flex：2 会以相等的间距更改子元素的宽度。

<div style={{ float: 'right' }}>
      <ActionButton style={{
        display : 'flex', 
        flex : '1',
        flexDirection: 'row',
        alignItems : 'center', 
        justifyContent : 'center',
        height: '40px',
        width: '151px',

      }} name={<div style = {{
      backgroundColor : 'red', 
      float : 'right'
    }}>FILTRAR</div>} 
      icon={<div style = {{
      backgroundColor : 'blue',
      width: '24px',
      height: '24px',
      float : 'left'}}><FilterIcon/></div>}>
      </ActionButton>
    </div>

动态定位React JSX按钮

3 个答案: