难以获得Li父元素的宽度，孩子不能继承宽度？

Question

截图：

我目前有这段代码：

<li
  style={{
   border: '1px solid rgba(0, 0, 0, 0.05)',
   width: '100%',
  }}
  key={uuidV4()}
>
 <span style={{ width: 'inherit' }}> // setting it to 100% or inherit, dont change anything
   <span style={{ width: '90%' }}>{`${toTitleCase(column)} `}</span>
     <span style={{ width: '10%' }}>
       <Button
         style={{
          width: '25px',
          fontSize: '18px',
          padding: '0',
          borderRadius: '50%',
         }}
         color="link"
         onClick={e => this.addActiveColumn(e, column)}
       >
        <i
          style={{
           borderRadius: '50%',
           backgroundColor: '#ffffff',
           color: '#343A40',
          }}
          className="fa fa-plus-circle"
          aria-hidden="true"
        />
       </Button>
      </span>
     </span>
    </li>

我希望文本的li元素宽度为90％，然后+按钮有10％，因此+按钮将在最右侧正确对齐，但结果不是我所期望的。帮助

Answer 1

默认情况下，

<span>是内联元素，width属性不会影响该元素。您可以将其更改为display: inline-block或display: block'

检查此codepen以查看我的意思