Question

这是我的一个组件的渲染功能的摘录，该组件是table：

   return (
        ...
        <td>
           <div style={{ width: '100%' }}>50</div>
           {' '}
           <span className='percentage-sign'>%</span>
        </td>
        ...
    )

此<td>正在起作用。我希望渲染器看起来像这样：50 %出现在水平方向。相反，由于50，我将其垂直放置（%上方的width: 100%）。

如果它不是<td>元素，那么本来可以解决flex-direction样式属性的问题，但是由于<td>具有display: table-cell，所以我无法执行这样。

我尝试将<td>的子级包装到div中并在其中设置display: flex，但是它删除了50和%之间的空格。

问题：如何使该表数据元素变为：

50和%之间有一个空格
让它们沿水平方向显示
让<td>的孩子跨越整个单元格，并填满整个宽度

Answer 1

解决问题的方法是，我没有为数字添加单独的<div>（在这种情况下为50），而是将所有<td>元素添加到了该div中：

   return (
    ...
    <td>
       <div style={{ width: '100%' }}>
          50
          {' '}
          <span className='percentage-sign'>%</span>
       </div>
    </td>
    ...
)

Answer 2

是不是div的提早结束了？

return (
    ...
    <td>
       <div style={{ width: '100%' }}>50</div>
       {' '}
       <span className='percentage-sign'>%</span>
    </td>
    ...
)

如何设置元素的伸缩方向

2 个答案: