html - HTML - 一个溢出的、相对定位的子元素在它的父元素中创建了额外的空间

Question

以下代码产生此结果：https ://i.stack.imgur.com/GkkJ2.png

我想删除在 PIN 的父元素左侧创建的额外空间。

这是我真实代码的简化片段，您可以在http://noam.netlify.app/上看到（来源https://github.com/iamunhoz/noam）

由于构建布局的整个方式，我不能使用将有问题的子元素放在其容器之外的解决方案。

export default function Ap() {
  const styles = {
    wrapper: {
      overflow: 'visible',
      margin: '100px 100px',
      border: '1px solid black',
      maxWidth: 'max-content'
    },
    pin: {
      backgroundColor: '#bbb',
      border: '1px solid #ccc',
      position: 'relative',
      top: '-15px',
      left: '40px'
    }as React.CSSProperties
  }
  return (
    <div style={styles.wrapper}>
      <span style={styles.pin}> PIN </span>
      <span>One </span>
      <span>Two </span>
      <span>Three </span>
    </div>
  )
}

标签： htmlreactjs