将表格标题文本和复选框都在一行上对齐并左对齐

问题描述

我正在将 React 用于汽车网络应用。

我正在使用名为 React-Talbe 的表库来构建动态表。

要在表格标题中显示 HTML，我需要这样做：

Header: () => (<div style={{ margin: 0,width: 250 }}><span>Vehicle Choices</span><span> *Include Foreign <input type="checkBox" name="includeForeignAutos" /></span></div>),

但是当它呈现到网页时，它看起来像这样：

   Vehicle Choices *Include    
   Foreign
             [ ]

我试图让它在一条线上排成一行，就像这样：

   Vehicle Choices  *Include Foreign [ ]

这是呈现的 HTML 的样子：

<th colspan="8" role="columnheader">
    <div>
       <span>
          <div style="margin: 0px; width: 250px;">
             <span>Vehicle Choices</span>
             <span> 
                " *Include Foreign "
                <input type="checkBox" name="includeForeignAutos">
             </span>
          </div>
       </span>
    </div>
</th>

有没有办法使用内联样式标签来确保它是全部和一行并在表格标题的左侧对齐？

谢谢！

解决方法

您已将宽度设置为 250 像素，并且在同一行中需要更大的宽度。宽度较小，这就是为什么它不在同一行中的原因。