陣營工具箱複選框內聯

我目前面臨的一個問題作出反應，工具箱複選框https://github.com/react-toolbox/react-toolbox/tree/dev/components/checkbox試圖內嵌顯示他們是這樣的：陣營工具箱複選框內聯

但是，所有我能做的就是像這樣顯示它們：

代碼如下所示：

  <Checkbox 
       checked={this.state.checkboxes[0].task} 
       label={t('search:instance_template.task')} 
       onChange={() => { 
        this.handleCheckboxChange(0, 'task') 
       }} 
      />

種

樣式是這樣的：

input[type="checkbox"]{ 
    display: inline-block; 
}

的複選框確實接收類和屬性，但屬性，如「顯示：inline-block的」沒有任何影響到他們。有任何想法嗎？謝謝！

來源

2017-08-04 Nocebo

你有沒有嘗試過的造型與柔性？ –

是的，我做到了。變化： ''=''display：'flex'，flexDirection：'row'}}' – Nocebo

'inline-flex'嘗試 – Hash

[閱讀目的]鏈接兩個頁面，以及每個樣式的工作方式。 Flexbox，CSSFlexbox

與問題相關的示例。

來源

2017-08-04 07:15:51 Hash

謝謝你，男人！ – Nocebo

@Nocebo有一個美好的一天:) – Hash

坦克，你也:) – Nocebo

基於@Hash此的評論是結果：

 <div id="instanceCheckboxes" style={{display: 'inline-flex', flexDirection: 'row'}}> 
       <Checkbox 
        checked={this.state.checkboxes[0].task} 
        label={t('search:instance_template.task')} 
        onChange={() => { 
         this.handleCheckboxChange(0, 'task') 
        }} 
       /> 
       ... 
      </div>

這是沒有必要直接樣式的複選框。結果如下：

來源

2017-08-04 06:53:07 Nocebo

陣營工具箱複選框內聯

回答

相關問題